Bootstrap: how to stack divs of different heights?


Tags: css3,twitter-bootstrap,twitter-bootstrap-3

Problem :

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!



Solution :

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

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


    CSS Howto..

    JQuery/CSS - How i can set imagem full size of div

    How is table cell height calculated?

    How do I align these links inside inline-blocks to the top?

    How do I force an image to be responsive using CSS so it stays in the same position?

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    Show another element with hover

    css image not showing up

    How to animate an image as it grows from the width of a container to the full viewport width?

    How to read this hover syntax in css?

    how to add inline css to rails link_to helper

    css: how to get the browser's default font family

    How to hide label on radio checked using css

    How to reset Chrome dev tools CSS styles filter?

    CSS - How to float correctly into pseudocolumns

    How to exclude last child in css psuedo class selector

    How to add a fade effect to html transition with javascript

    How to auto resize img group with browser change size?

    How to position an image sprite at the bottom of an element of unknown height

    How to effectively use the Frameless grid?

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    HTML/CSS current active menu does not show active

    How to make
    , , or list display tabular data as a table?

    How do I let the DOM know about new elements created on the fly?

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    How to exclude particular class name in CSS selector?

    how to display a dropdown ul two per row

    How to make function NOT highlight last row in table?

    How to change a lot of img when hover

    How to change navbar background color after page has scrolled down

    How to style a credit card expiration date input field to include spaces and forward slash?