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 content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.

I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)

I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.

Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.

<div class = "container"> <div class="row">     <div id="equalheight">                <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">             <div class="info-block"><!-- BODY BOX-->                 <p>one line of copy</p>             </div>         </div>            <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">             <div class="info-block"><!-- BODY BOX-->                 <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>             </div>         </div>            <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">             <div class="info-block"><!-- BODY BOX-->                 <p>one line of copy</p>             </div>         </div>            <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">             <div class="info-block"><!-- BODY BOX-->                 <p>one line of copy</p>             </div>         </div>                    </div> </div> 

Above is my html, the second content area has the large amount of copy

<script>     $('#equalheight div').equalHeights(); </script>  <script>     $(window).resize(function(){        $('#equalheight div').equalHeights();      });     $(window).resize(); </script>    

Above is my Javascript, calling the before mentioned library.

Thanks for any help / advice

Answer 1

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 2

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