6

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>

Boostrap with 4 Col-md-4

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>

Boostrap with 5 Col-md-4

Any Ideas?

Community
  • 1
  • 1
enriqg9
  • 1,455
  • 1
  • 21
  • 40
  • In your fiddle you have a row inside an col-xs-8 which might be causing some issues. But can you give us a complete code sample/fiddle which demonstrates the problem? –  Sep 07 '14 at 23:33

3 Answers3

7

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!

Devin
  • 7,690
  • 6
  • 39
  • 54
  • Never thought of this! but defining a min-height solves it. You are a life saver! Thanks! – enriqg9 Sep 07 '14 at 23:49
  • 1
    @enriqg9 you should check out the documentaion on the grid system. you can use the built-in `.clearfix` class to resolve this as well http://getbootstrap.com/css/#grid-responsive-resets – Schmalzy Sep 08 '14 at 00:01
  • @Schmalzy Thanks, i'll probably count the iterations on the loop and close and reopen the `.row` div. That way everything clears as supposed. – enriqg9 Sep 08 '14 at 00:04
  • while the clearfix reset is one of the MANY methods you can use, this is not a very good method for dynamic generation of content in responsive layout models, it provide very randomish results and requires a lot of adjusts with media queries, as opposed to 1 line of code that solves everything. But if you want to go the PHP markup way, use a function that, instead of words(like the_excerpt), counts characters, so they always will be the same length – Devin Sep 08 '14 at 00:18
  • @Fabio What I mean is counting the number of columns so that every 12 columns the `.row` div is closed and then a new one is opened, that way each set of 12 cols is wrapped in a row independently. This is another solution to yours which I found totally effective, since the excerpt is limited to a number of words thus it cannot expand in height past the min-height that was set. – enriqg9 Sep 08 '14 at 02:33
3

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

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

Another way to solve this:

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="clearfix custom-class"> <!-- Before the loop starts again -->
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

And then adding some CSS to make it visible only starting with medium screen size

.custom-class { 
  display: none;
}

@media (min-width: @screen-md) {
  .custom-class {
    display: block;
  }
}

This way there's no need to predetermine the minimal height of blocks and works perfectly fine

OhDeer
  • 131
  • 2