Bootstrap 3 grid layout dynamically generated columns don't clear right

Question

I'm trying to generate a bootstrap (v3.0.3) grid layout. Data is dynamically generated with following code:

<div class="row">
    @foreach (var Node in Model.Tour.Nodes)
    {
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="thumbnail">
                @Node.SomeData
            </div>
        </div>
    }
</div>

Unfortunately, sometimes columns don't clear right as one is taller than the other, and I get something like this:

I know that there is a way to fix that by adding clearfix class where the new row should start:

<div class="clearfix visible-xx"></div>

But I can't really do it when content is dynamically generated.

Are there any solutions for such problems, or maybe my approach is wrong as I'm new to bootstrap.

Answer 1

I can't really do it when content is dynamically generated.

EDIT 4/29/2016

Latest solution: http://jsfiddle.net/silb3r/3hzmwbt0/

The first solution (still below) relies heavily on altering your HTML markup. This is undesirable because: (1) it's not semantic; (2) empty elements aren't great; and (3) it will affect your ability to use nth-child selectors on your columns effectively.

Those are just a few reasons why I put together a quick version of this which relies solely on CSS without any clearfix elements in your markup.

The latest solution targets and clears columns' left sides at various viewport widths.

Using this syntax: nth-child(an +b)

a = the number of columns you're displaying at that viewport

b = a + 1

END EDIT

Of course you can! You'll need to keep track of the thumbnail count and output a different clearfix accordingly. In your example, you would need:

1. <div class="clearfix visible-sm-block"></div> after every two thumbnail columns
2. <div class="clearfix visible-md-block"></div> after every three thumbnail columns
3. <div class="clearfix visible-lg-block"></div> after every four thumbnail columns

You should be able to create an index variable set to 0 and iterate it each time in your loop while using the modulo operator to output the correct clearfix.

You can definitely combine visibility classes when multiple clearfixes occur after a thumbnail column as I've done in this working example: http://jsfiddle.net/silb3r/jtg7sn9z/.

Edit Updated the working example (http://jsfiddle.net/silb3r/jtg7sn9z/1/) and the code below to reflect the new Bootstrap visibility classes which now include the box model.

example:

<div class="row">
  @for(var i = 0; i < Model.Tour.Nodes.Length; i++) {
    var Node = Model.Tour.Nodes[0];
    if(i % 2 == 0) {
      <div class="clearfix visible-sm-block"></div>
    }
    if(i % 3 == 0) {
      <div class="clearfix visible-md-block"></div>
    }
    if(i % 4 == 0) {
      <div class="clearfix visible-lg-block"></div>
    }
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
        @Node.SomeData
      </div>
    </div>
  }
</div>