Bootstrap grid with 8 divs of varying height

Question

I'm trying to use bootstrap grid system to arrange 8 boxes of equal width and simiar but varying heights. I want the layout to do either 2x2x2x2, 3x3x2, 4x4 - responsive to screen size.

I can do the responsive layout but the issue I have is getting them to format properly so it doesn't leave whitespace above some of the boxes in some of the arrangements. I've tried varying combinations of clearfix but can't make it work. Is it possible? I assume so! Here's what it looks like:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 1 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 2 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... .... .... ..... ......</p>
        </div> <!-- /.block 3 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 4 -->

        <div class="clearfix visible-md-block visible-lg-block"></div>

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... </p>
        </div> <!-- /.block5 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... ....</p>
        </div> <!-- /.block 6 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... .... ..... .... .... .... ....</p>
        </div> <!-- /.block 7 -->

        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="feature-icon">
                <img class="img-responsive" src="images/places.png" alt="mockup" />                         
            </div>
            <h4>TITLE</h4>
            <p>Some text of vaying length .... .... ....  ....</p>
        </div> <!-- /.block 8 -->

    </div><!-- /.row -->
</div><!-- /.container -->

Answer 1

You can use flexbox to get the layout you want. It's not masonry style, but it fixes the blank spaces that you get when an element can't float all the way to the left side of the page. With flexbox you get the first case from your image that you linked in a comment, so elements in the next row will start below the highest element from the previous row.

Just wrap all of the columns inside a div like this (it might work if you just put flexbox on "container" div or "row" but I'm not sure):

html:

<div class="container">
    <div class="row">
        <div class="flex-wrapper">
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="feature-icon">
                    <img class="img-responsive" src="images/places.png" alt="mockup" />                         
                </div>
                <h4>TITLE</h4>
                <p>Some text of vaying length .... .... .... ..... ....</p>
            </div> <!-- /.block 1 -->

            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="feature-icon">
                    <img class="img-responsive" src="images/places.png" alt="mockup" />                         
                </div>
                <h4>TITLE</h4>
                <p>Some text of vaying length .... .... .... ..... ....</p>
            </div> <!-- /.block 2 -->

            ....etc....

        </div>
    </div>
</div>

css:

.flex-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

It works in all browsers except for IE10 and below, but there's a polyfill for those browsers as well so you should be good to go.

EDIT:

You could use the solution that was posted in a comment on another answer to get the masonry style (bootsnipp.com/snippets/OeVbl), and if you want to avoid ems you could use column-count to manipulate the number of columns. If you want a different number of columns on different resolutions just put a different column count in a media query.

.row {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -moz-column-gap: 15px;
    -webkit-column-gap:15px;
}