JennyDanger JennyDanger - 7 months ago 30
HTML Question

How can I ensure columns wrap equally in Twitter Bootstrap 3?

If I have an unknown number of items to display, each within their own column, is there a way to get them to wrap equally without having to create new rows for each?

I have

<div class="row">
<!-- 1st col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Short</p></div>
<!-- 2nd col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem</p></div>
...
<!-- nth col --><div class="col-md-3 col-sm-4 col-xs-6"><h1>Title lorem</h1><p>Description lorem that might be long</p></div>
</div>


The columns will have varying heights, which can sometimes lead to unequally distributed columns:

enter image description here

Is it possible to get the columns to always wrap in rows of 4 columns (for medium), 3 columns (for small), or 2 columns (for extra-small) with just CSS, or will I need some JS or to use some server side programming to create new rows?

Answer

Thats unfortunately not how the grid works. You could use something like masonry or have different containers generated for each breakpoint with php. e.g.:

<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>
Comments