I am going over the 12 columns per row in bootstrap 3.2.0, and according to bootstrap and this post this is totally OK.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
The problem I have is that when I use 4 col-md-4
I get the 4th column to the right like the picture below.
<div class="row">
<div class="col-md-4">
<a href="#" title="Test">
<img width="225" height="150" src="blog.jpg />
</a>
<h4>
<a href="#" title="Test">Test</a>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio nisi, sodales nec commodo at, viverra eget eros. In hac habitasse platea dictumst. Sed semper […]</p><!-- EXCERPT -->
<p><a href="#" title="Read More">Read More</a></p>
</div>
<div class="col-md-4">
//Loop Repeats
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
If I add a 5th or even 6th one, everything floats to the left nicely like in the image below.
<div class="row">
<div class="col-md-4">
//Loop Repeats
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Any Ideas?