Why is my Bootstrap column centered instead of left-aligned?

Question

I am using standard Bootstrap 3 CSS.

Image of my issue:

My HTML is below:

Answer 1

You are facing floating issue as you are not wraping your element inside .row as you can see in this question : Floated elements of variable height push siblings down

So here is what you are having if you don't use container/row provided with bootstrap :

div {
  border: 1px solid;
}

  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum


  lorem ipsum lorem ipsum lore


  lorem ipsum lorem ipsum lorem ipsu


  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

And if you correctly structure your elements following bootstrap rules you obtain this:

div {
  border: 1px solid;
}

  

    

      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    
    

      lorem ipsum lorem ipsum lore
    
  
  

    

      lorem ipsum lorem ipsum lorem ipsu
    
    

      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum