Bootstrap 3 > trying to create columns with equal heights

Question

I\'ve only just started learning so please stick with me and I\'ll try provide as much info as I can.

Using Bootstrap 3 I have been attempting to adjust a number of

Answer 1

Bootstrap team developped a CSS class .row-eq-height which is exactly what you need. See here for more. Just add this class on your current row like this:

 <div class="row row-eq-height">
    your columns
 </div>

Warning: You have to add a new div.row.row-eq-height each 12 columns

Answer 2

You can try using CSS negative margins (no jQuery needed)..

.demo{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#efefef;
}

#equalheight {
    overflow: hidden; 
}

http://bootply.com/92230

EDIT - another option

Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437

Answer 3

You can use this plugin. It works pretty good.