24

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

Community
  • 1
  • 1
Ryan Michael
  • 257
  • 1
  • 3
  • 6
  • http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Trevor Nov 06 '13 at 19:33
  • That doesn't help because that only does one row. I have multiple rows that are being generated, I can only get that working with 1 row. There is an example below from Skelly - but that involves creating a new row div tag. I'm wanting to avoid this as well. – Ryan Michael Nov 06 '13 at 22:09
  • http://stackoverflow.com/questions/24745966/twitter-bootstrap-responsive-block-heights/ – trante Jul 15 '14 at 06:23

3 Answers3

21

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    In the above example it involves creating a new row every 4, is there a way of using the above example without creating a new row? Just that I don't know how many rows there will be, so I would need to do a count to determine when a new row starts based on my php array - and if I am on a mobile view it goes down to 2 a row. Just seems long winded. – Ryan Michael Nov 06 '13 at 18:52
  • Do you mean like this? http://bootply.com/92232 Then each grid row will be the height of it's tallest cell. – Carol Skelly Nov 06 '13 at 18:57
  • It's a combination of the two. So in your first example you are creating a row every 4 content blocks - the look of this is correct but I don't want to have to create the new div row every 4 blocks The second example doesn't display the content how I want it, however syntax wise it's great because I don't have to add a new row div. I don't want to do a new row div every 4 content blocks because on a lower screen res I may only be displaying two blocks. That make sense? – Ryan Michael Nov 06 '13 at 22:06
  • Just adding another comment, I've used the first example and it's fine. The only issue I was having is that because I am generating these boxes dynamically from within a php loop I would have to add in the row divs dynamically as well, I was hoping there was a way around it. – Ryan Michael Nov 06 '13 at 22:26
  • Nice.. glad you were able to figure it out. – Carol Skelly Nov 07 '13 at 02:38
  • Because I can't create an "I'm facing this problem too" topic, any clues on why it's not happening in [this code](http://www.bootply.com/dQDbA0gAZG). I've checked the markup several times and, except of some adjustments to fit the layout I'm working on, as far as I can tell, it's pretty much same of yours, but I'm not receiving the same results when long ans short texts are displayed together. –  Dec 16 '14 at 13:34
5

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

Kevin R.
  • 1,283
  • 10
  • 8
1

You can use this plugin. It works pretty good.

Kerem Demirer
  • 1,186
  • 2
  • 13
  • 24