Bootstrap 3 fluid grid layout issues?

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