Richard Richard - 5 months ago 52x
CSS Question

How can I make Bootstrap columns all the same height?

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.

enter image description here

Here is the code:

<div class="row">
<div class="col-xs-12 col-sm-4 panel" style="background-color: red">
some content
<div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
<img src="">
<div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
some more content

Here is a Bootply example


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


    overflow: hidden; 

    margin-bottom: -99999px;
    padding-bottom: 99999px;

Solution 2 using table


.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.


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