Making Bootstrap Panels Have Equal Height

Question

I have four boostrap .panels with different content within each one. Thus, each panel has a different height. How can I set the height of each panel to be equal to the panel with the greatest height? So that all panels have the same height?

<div class="promo">
    <div class="container">


        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading-custom">NEW OPENING</div>
                        <div class="panel-body">
                            <img src="images/img.gif" class="img-circle center-block margins" />
                            <p>To celebrate our new opening, we have sales on many of your favorite items.</p>
                        </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading-custom">QUALITY ASSURRED</div>
                        <div class="panel-body">
                            <img src="images/img2.gif" class="img-circle center-block margins" />
                            <p>Our products come with a five-year warranty.</p>
                        </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                <div class="panel panel-default" id="tallest">
                    <div class="panel-heading panel-heading-custom">IN-STORE SPECIAL</div>
                        <div class="panel-body">
                            <img src="images/img3.gif" class="img-circle center-block margins" />
                            <p>Take advantage of our new in-store special. You won't be disappointed to find the greatest deals. Now when you buy two or more products, you can get a third product of similar value for free. </p>
                        </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading-custom">FREE CONSULTATIONS</div>
                        <div class="panel-body">
                            <img src="images/img4.gif"  class="img-circle center-block margins" />
                            <p>If you are by our area, we can pay you a visit or you can stop by our office--consultations are entirely free for local members.</p>
                        </div>
                </div>
            </div>

        </div>
    </div>
</div>

Possible duplicate of [How do I keep two divs that are side by side the same height?](http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — KAD, Oct 31 '16 at 10:31

score 3 · Answer 1 · answered Oct 31 '16 at 10:27

3

Use a each loop & a global variable to get the largest height

var maxH = 0;

$('.panel').each(function(){
if($(this).height() > maxH) {
  maxH = $(this).height();
}
});

$('.panel').height(maxH);

demo:https://jsfiddle.net/5hfxmpjw/

answered Oct 31 '16 at 10:27

madalinivascu

32,064
4
39
55

I placed that script with an opening `` tag and it didn't work. – Matt Oct 31 '16 at 10:49
I did. Made sure it was in between `$(document).ready(function(){` and `});` – Matt Oct 31 '16 at 14:11
Getting a reference error. Not sure why, there is only one `var` in your code. Furthermore, everything references `".panel"` class, which is used in each one of my panels. – Matt Nov 01 '16 at 05:09

Making Bootstrap Panels Have Equal Height

1 Answers1