14

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:

Sample grid layout

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.

1
  • This is the normal behavior of floats and all heights must be equal or you need to use Masonry or a similar script.
    – Christina
    Jan 30, 2014 at 2:55

5 Answers 5

30

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>
2
  • 2
    Why does this answer not have more upvote? Very helpful!
    – Daniel P
    Feb 5, 2015 at 22:24
  • How can something like this be achieved using the ng-repeat directive in AngularJS?
    – Sean
    Apr 13, 2015 at 23:20
0
.row > div.col:nth-of-type(3n+1) {
    clear: both;
}
0

For angularJS ng-repeate, I used the following:

<div class="row">
<div data-ng-repeat="node in Model.Tour.Nodes track by $index">
    <div data-ng-if="$index != 0 && $index % 2 == 0" class="clearfix visible-sm-block"></div>
    <div data-ng-if="$index != 0 && $index % 3 == 0" class="clearfix visible-md-block"></div>
    <div data-ng-if="$index != 0 && $index % 4 == 0" 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>

1
  • why the down votes? Unless there is something wrong with it? Sep 9, 2017 at 22:10
0

You could use the following CSS:

.row > div.col:nth-of-type(even) {
  clear: both;
}

Reference: http://www.w3schools.com/cssref/sel_nth-of-type.asp

0

If you choose to use nth-of-type, you can combine those with media queries to clear the appropriate columns at different viewport widths.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.