More than 12 cols per row in bootstrap

Question

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?

Answer 1

The image is giving you the answer.

See, Bootstrap floats the columns to the left, just as you say. The float model means that the element will be floated to the left blocking the flow of the next element. Thus, in your first picture, see how your second column, first row is slightly longer and probably has some margin and padding which is blocking the flow of the element in that following row. In the second picture you don't see it because the long element is at the side. And the best description of a symptom was given by yourself:

I am generating this content through a wordpress loop in a custom shortcode, and I noticed that somehow if I remove this line in the Shortcode function the columns float just fine as in this jsFiddle:

$output .= '<p>' . get_the_excerpt() . '</p>';

There you have. The excerpt is somehow 'randomish' in the length of the containing block, so your problem is something that happens almost every single day to any WP developer. There are many different ways to solve it, but the easiest one is this:

.col-md-4{min-height:400px /* test the height you need to enable normal flow of the floats */}

And voilá, problem solved!

Answer 2

The wrapping issue is happening because the content of your columns are different heights which causes "gaps" in the grid. You can iterate and use the clearfix DIV every X columns, OR you can use a CSS-only solution like this..

http://codeply.com/go/BGSOAQi72l

@media (min-width: 992px) {
    .row > .col-md-4:nth-child(3n+1) {
        clear: left;
    }
}

The 992px is used since that's where the md breakpoint starts. Read more on when to use Bootstrap's row class.

More details: Bootstrap row with columns of different height