Bootstrap 3 > Trying to Create Columns with Equal Heights

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Bootstrap with 3 column having same height for all row

You can add these style to your code:
I checked this in responsive mode.

<style>
    .col-4{
    min-height: 100px;
    text-align: center;
    }
    .col-4 span{
      display:block
    }
    .col-4 i{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
    </style>

Same height column bootstrap 3 row responsive

You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.

Here is the code:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

edit history: changed the ',' sign into ';' sign

Equal height columns bootstrap 3

Set a minimum height for the .thumbnail class

.thumbnail {
    min-height: 330px;
}

and for the overflow issue add

.text-center {
    word-wrap: break-word;
}

Fiddle
http://jsfiddle.net/8d8g7hyt/3/

Bootstrap 3 columns in one row same height

Flexbox could do this, but that's not well supported.

Your best bet is to fake it. Instead of worrying about getting the columns the same height, work with the element that is containing all the columns. By default, it will expand to accommodate the child with the greatest height.

Then, apply a sneaky background image that gives the illusion of borders or background colours:

.row{
    background: url(sneaky.png) repeat-y;
}

This trick has been around for a while: http://alistapart.com/article/fauxcolumns

UPDATE WITH FLEXBOX

Using Flexbox for equal height columns is trivial. Apply flexbox to the parent:

<div class="row" style="display:flex;">

And.... you're done. All children will have the same height I added a class called col to each column div with a background colour and a margin so you can tell they are all equal height.

http://www.bootply.com/120891

Bootstrap 3 - Columns in row should have same height

Well, if you are ok with jquery solution then please have a look at this code.

Check fiddle

$(document).ready(function(e) {
    var heightNew = 0;
    $('.col-md-6 article').each(function(index, element) {
        if($(this).height() > heightNew){
            heightNew = $(this).height();
        }
        $(this).css('height', heightNew+'px');
    });
});

so just add this in tag and use this css.

article{
    text-align:center;
    background-color:lightgray;
    margin:0 25px 50px 25px;
}
h1, p{
    padding:10px;
}

What i did is, i took max-height of article and give that height to other so who ever is the biggest article, all article will be the same height. Hope you will like my idea. Thank you

Same height for Bootstrap 3 grid columns

The solution is to "remove" the display: table which is set to .row::before:

.aligned-row {
    display: flex;
    flex-flow: row wrap;

    &::before {
        display: block;
    }
}

Demo

Bootstrap columns with the same heights

Reading: How can I make Bootstrap columns all the same height?

You can use:

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Here's a runnable example:

.row{    overflow: hidden; }
[class*="col-"]{    margin-bottom: -99999px;    padding-bottom: 99999px;}
.row1 {  height: 100%;}
.col1{  background-color: red;  color: white;  height: 100%;}
.col2{  background-color: green;  color: white;  height: 100%;}
.col3{  background-color: yellow;  height: 100%;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row row1">      <div class="col col1 col-xs-3">          Column 1      </div>      <div class="col col2 col-xs-3">          Column 2       </div>      <div class="col col3 col-xs-3">          <div class="row">              Column 3          </div>          <div class="row">              Column 4          </div>      </div>  </div></div>

---

Related Topics