Make multiple columns share the max height of all columns in Bootstrap

Question

I am new to bootstrap. I am using three columns with class span4 each to show some highlighted content. The boxes are with background color and a solid border. How do I set the height of all the three columns to the max height column among three?

<div class="row grid-row">
 <div class="span4">
  <div class="widget-header">
    <h3>Tutoring &amp; Training Centers</h3>
  </div>
  <div class="widget-body">
    <p>World’s leading tutoring centers use to create custom diagnostic analysis to improve student performance, increase efficiency, and grow customer base.</p>
<p class="center"></p>
  </div>
 </div>
 <div class="span4">
  <div class="widget-header">
    <h3>Tutoring &amp; Training Centers</h3>
  </div>
  <div class="widget-body">
    <p>World’s leading tutoring centers use to create custom diagnostic analysis to improve student performance.</p>
<p class="center"></p>
  </div>
 </div>
 <div class="span4">
  <div class="widget-header">
    <h3>Tutoring &amp; Training Centers</h3>
  </div>
  <div class="widget-body">
    <p>World’s leading tutoring centers use to create custom diagnostic .</p>
<p class="center"></p>
  </div>
 </div>
</div>

I have attached a screen short for refrense.

enter image description here

you can add a custom class to make the height constant/consistent for all the 3 div's — jayeshkv, May 06 '14 at 06:28
Just a side note - you're using an old version of Bootstrap. Of course you may not want / be able to upgrade to latest, but thought I'd mentioned it in case you came across the old documentation accidentally. Latest version: http://getbootstrap.com/ — davidpauljunior, May 06 '14 at 06:36
the theme I am using for my wordpress site does not support bootstrap 3.x thanks all for your replies — Umar Adil, May 10 '14 at 08:31

score 1 · Answer 1 · answered May 06 '14 at 22:34

There will be an official experimental example of same-height columns using CSS flexbox in Bootstrap v3.2.0. Here's the gist of it:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

And then use <div class="row row-eq-height"> instead of <div class="row">.

Note the flexbox isn't supported in IE<10.

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

With jQuery

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

With CSS

Also check out: How to create equal height columns in pure CSS

edited May 23 '17 at 11:44

Community

1
1

answered May 06 '14 at 06:30

Chankey Pathak

21,187
12
85
133

score 0 · Answer 3 · answered May 06 '14 at 06:45

0

This will help you

Html :

<div class="main">
    <div class="box">a</div>
    <div class="box">b</div>    
    <div class="box" style="height:100px;">c</div>  
</div>

Css :

.main{
    height:auto;
    display:table;

}
.box{
    height:100%;
    width:80px;
    display:table-cell;
    background:gray;
    border:1px solid red
}

Demo

answered May 06 '14 at 06:45

Amit

1,841
1
19
36

This doesn't make the columns responsive. – kurious Aug 12 '15 at 16:29

Make multiple columns share the max height of all columns in Bootstrap

3 Answers3