Bootstrap 3 responsive columns of varying heights

Question

EDIT The pricing tables\' content will all be dynamically generated, I cannot predict their height, I\'m simply using the 400px case for th

Answer 1

after 3 cols for md, 2 for sm, 4 for lg, you can add a div with style "clear:both" using mod (%).

Answer 2

You can be clever with media queries, and clear the first item in the next row depending on the resolution size.

.regular {
    background: gray;
    height: 350px;
    margin-bottom: 30px;
}
.tall {
    background: red;
    height: 500px;
    margin-bottom: 30px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .fix-row > div:nth-child(3) {
        clear: left;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: left;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: none;
    }
    .fix-row > div:nth-child(5) {
        clear: left;
    }
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row fix-row">
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="tall">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
</div>

JSFiddle Example: http://jsfiddle.net/tkL8edwj/

How it Works:

I'm using media queries to determine when the last row item is, then using the CSS pseudo selector nth-child(n) to specify the last item in the row.

Since you are using col-lg-3, col-md-4, and col-md-6 for your grid item classes, I can know the first item in the next row based on the default Bootstap break points.

col-lg-4 breaks at a certain point (1200px), and because you are using 4 I know there are 3 items in the row (12/4 = 3). That means I can target every 5th div in the row and get the first item of each row, and then use clear: left to ensure it clears the float of the divs before it.

Same thing for the rest of the break-points. I'll notice I'm also resetting the clear to clear: none when necessary so the one's previously targets don't break at the wrong resolutions.

Answer 3

Another way is to use CSS column-width like this..

.row {
 -moz-column-width: 20em;
 -webkit-column-width: 20em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
}

.row > .col-lg-3 {
 display: inline-block;
 padding: 0;
 margin: 10px;
 width: 100%; 
 float:none;
}

Demo: http://bootply.com/jFdfbBgkv6

Answer 4

I know exactly what you're talking about as I have ran into the same issue. I don't know ruby, but the answer is simple:

1. Use a for loop with a counter i
2. When i % 4 == 0, print: <%= </div><div class="row"> %> after your <div class='col'>.

This way, every 4 entries, the class='row' will stop and create a new one. and the last row will not affect the next row and the class='col' will not be affected. This also works when screen size is lowered.