user3379926 user3379926 - 3 months ago 15
CSS Question

Twitter Bootstrap Rows and Columns of different height

I currently have something like:

<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>


Now assuming that,
content
was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.

Currently TWBS will place the next line of
col-md-4
under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element

Answer

I think you have 3 options:

A CSS approach like this this using column-width..

http://www.bootply.com/120682

A 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every x columns)..

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

http://bootply.com/89910

There is also a CSS-only variation of the 'clearfix'.

http://www.codeply.com/go/lUbs1JgXUd

Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..

http://www.bootply.com/108697