How can I make Bootstrap columns all the same height?

Question

I'm using Bootstrap. How can I make three columns all the same height?

Here is a screenshot of the problem. I would like the blue and red columns to be the same height as the yellow column.

Here is the code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container-fluid">  <div class="row">      <div class="col-xs-4 panel" style="background-color: red">          some content      </div>      <div class="col-xs-4 panel" style="background-color: yellow">          catz          <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">      </div>      <div class="col-xs-4 panel" style="background-color: blue">          some more content      </div>  </div>  </div>

Answer 1

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; }