Bootstrap: how to stack divs of different heights?

Question

This question is a bit similar to this one, but I want to know if there is a pure CSS solution that is compatible with Bootstrap.

Basically, I have the following layout:

enter image description here

This is the HTML of that page:

<div class="menu row">
    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>
</div>

The problem is, as you can see, that the row system of Bootstrap is a bit inconvenient here. I want these categories to stack in the most optimal way. So my question is: how can I do that with CSS? The masonry plugin seems excellent but I would like to keep it for plan B.

Thanks!

score 33 · Answer 1 · answered Nov 06 '13 at 10:48

33

Better to use .visible-sm,.visible-md, .visible-lg with clearfix classes. That helps to clear the floats according to screen sizes also.

<!-- This will clear the float in Middle and Large Size screens only -->
<div class="clearfix visible-md visible-lg"></div>

<!-- This will clear the float in Small Size screens only -->
<div class="clearfix visible-sm"></div>

See Reference: on Bootstrap 3

answered Nov 06 '13 at 10:48

Ashish Kumar

2,991
3
18
27

Great solution! Clean and helpful! – Very Curious Apr 26 '15 at 15:13
2

This does help the rows to wrap every X, but doesn't eliminate spacing like a "masonry" style layout. Also, it's a lot more markup: http://www.codeply.com/go/3gS13OJmea – Carol Skelly Apr 07 '16 at 19:01

score 17 · Accepted Answer · edited May 23 '17 at 11:54

17

Take a look at these examples..

Masonry-style Layout ONLY with CSS

Applied to your Bootstrap list-group it would look something like this..

http://bootply.com/85737

However, you need to remove the Bootstrap col-* classes from your markup since they use floats a mess up the masonry layout. Use the *-column-width property to change the width of the panels. So, it's possible with pure CSS, but not cross-browser compatible so you still may want to use the Masonry plugin as a fallback.

If you're simply looking to ensure the columns wrap every x columns, use Bootstrap responsive resets, or a clearfix solution with media queries like this: http://www.codeply.com/go/jXuoGHHker

More on solving the different heights issue

UPDATE Bootstrap 4 will include a CSS column layout masonry option.

edited May 23 '17 at 11:54

Community

1
1

answered Oct 05 '13 at 09:56

Carol Skelly

351,302
90
710
624

1

This is great! I'm in the luxurious position of only having to support modern browsers, so I'll go for the column css solution. Thanks for writing it out, this was new to me. – Moeri Oct 05 '13 at 11:31
@IanSteffy you should delete that comment. that link has been OBE for a very long time – Carol Skelly Mar 10 '17 at 23:49

jsdev · Answer 3 · 2014-09-10T09:23:37.163

You can try this

<div class="grid-container">
    <div class="sub-grid">....</div>
    <div class="sub-grid">....</div>
    <div class="sub-grid">....</div>
</div>


.grid-container{


   -moz-column-count:2;
   -moz-column-gap:10px;
   -webkit-column-count:2;
    -webkit-column-gap:10px;
    column-count: 2;
    column-gap: 10px;

}
.sub-grid{display: inline-block;width: 100%;}

demo http://teknosains.com/

score 0 · Answer 4 · answered May 23 '16 at 07:59

My solution is based on the answer of @ashish-kumar

I have items shaped as a box, as follows

<div class="row the-list">
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
</div>

The trick is to add a clearfix div, after every ".box" item, like so

<div class="row the-list">
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="box-wrap clearfix"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="box-wrap clearfix"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="box-wrap clearfix"></div>
</div>

This can be achieved using jQuery

$('<div class="box-wrap clearfix"></div>').insertAfter('.box');

Now, using css, I've made the ".clearfix" of after every 2nd\3rd\4th box (depending on the current screen size), be shown.

/* hide all new lines by default */
.the-list .box-wrap {
    display: none;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* reset new lines */
    .row.the-list .box-wrap {
        display: none;
    }
    /* new line every 2nd box */
    .the-list .box-wrap:nth-child(4n) {
        display: block;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* reset new lines */
    .row.the-list .box-wrap {
        display: none;
    }
    /* new line every 3rd box */
    .the-list .box-wrap:nth-child(6n) {
        display: block;
    }

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* reset new lines */
    .row.the-list .box-wrap {
        display: none;
    }
    /* new line every 4th box */
    .the-list .box-wrap:nth-child(8n) {
        display: block;
    }
}

Notice that when doing the "reset new lines", the rule is .row.the-list .box-wrap and has the ".row" at the beginning, so that this rule will precede the display: block; of the rules before it.

A live example, see All Escape Rooms UK's website

Bootstrap: how to stack divs of different heights?

4 Answers4

Linked

Related