Bootstrap Fluid grid system with different height

Question

I am new in Bootstrap. I want to use the fluid grid system grid with different height and same width like the following image .

How can i implement the same? Please help me.

Answer 1

The only way to do this with Bootstrap "out-of-the-box" would be to use 4 columns and stack the items in each. This isn't ideal for dynamic content when you don't know how many items you'll have in each column. Also the items order top-to-bottom, and not left-to-right.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        <!--item1-->
        <!--item2-->
        <!--item3-->
        <!--item4-->
        </div>
        <div class="col-md-3">
        <!--item5-->
        <!--item6-->
        <!--item7-->
        <!--item8-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
      </div>
</div>

---

Otherwise, you have to use a jQuery plugin like Masonry or Isotope, or using CSS3 multi-columns.

Jquery plugin method

Bootstrap Masonry Demo
Bootstrap Masonry Demo 2

CSS3 columns method (Masonry-like CSS solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right.

CSS3 multi-columns Demo

There is also more detailed info in this answer to a similar question.

Update 2018

Bootstrap 4 includes a Masonry-like solution using CSS3 multi-columns: Masonry cards Demo