css - Bootstrap 3 fluid grid layout issues?

Question

Im using Bootstrap 3 to layout my website with fluid grid, but the boxes in the grid don't line up in a row.

You can see:

When a box is taller than another, the grid is not left aligned.

How can I fix it with some hack ? Thank for help !

Note : the height of box is auto wrap contents.

My html code

    <div class="row">
     <?php foreach($contens as $content){?>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
       <div class="contents-block">
        <div class="image"><img href="<?php echo $content['image'];?>" />
        </div>
            ................ some code .............
       </div>
      </div>
    <?php } ?>
   </div>

Answer 1

I'm not sure exactly what you're trying to accomplish, but the issue is caused because the content of the columns varies in height. There are 3 overall approaches to fix grid alignment / height issues..

1. A CSS only approach (using CSS3 column width) like this..

http://bootply.com/85737

2. A 'clearfix' approach like this (requires iteration every x columns). This is the approach recommended by Bootstrap known as "responsive resets"..

http://bootply.com/89910 (there is also a CSS-only variation to this approach)

3. Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..

http://bootply.com/61482

---

Update 2017

Another option is to make the columns the same height (using flexbox):

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox equal height Demo

Bootstrap 4 uses flexbox so columns in each row are the same height by default (without the extra CSS).

---

More on Bootstrap Variable Height Columns