Bootstrap 3 responsive columns of same height

Vertical alignment on Bootstrap 3 columns with equal height

Updated
26/06/2015 - Modified the classes and the general usage.
10/02/2015 - Fixed width of the columns. Added full height solution and improved demo.
20/12/2014 - Removed the container class and improved the row class, now inside .row. Fixed ie8 not removing the float.

Preface

There is no real css solution to have "columns content" with the same height, you're better off taking different a path to resolve the problem:

  • setting columns content with fixed height
  • cutting the text inside the columns with fixed height and overflow hidden (making it an excerpt)

But if you only want a row with all columns the same height, or you need the content vertical aligned, read on.

The Solution

Demo
Demo
Demo and source code

The Markup

The content must be inside a container, we call it with the class .inside, it's inside each column.

You have to add a div with the class .row-height inside the row, and also add .col-height to the columns.

<div class="row">
  <div class="row-height">
    <div class="col-xs-6 col-height">
      <div class="inside">
        <div class="content"><br><br><br><br><br><br><br></div>
      </div>
    </div>
    <div class="col-xs-3 col-height col-top">
      <div class="inside">
        <div class="content"></div>
      </div>
    </div>
    <div class="col-xs-2 col-height col-middle">
      <div class="inside">
        <div class="content"></div>
      </div>
    </div>
    <div class="col-xs-1 col-height col-bottom">
      <div class="inside">
        <div class="content"></div>
      </div>
    </div>
   </div>
</div>

If you want to restrict the effect to a certain media query, just use the responsive .row-height and .col-height classes: for example .row-sm-height with .col-sm-height.

As you have seen before, you choose the aligment of each column by using the classes .col-top or .col-middle or .col-bottom, or theirs respective responsive classes.

<div class="row">
  <div class="row-sm-height">
    <div class="col-xs-12 col-sm-6 col-sm-height">
      <div class="inside">
        <div class="content"><br><br><br><br><br><br><br></div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 col-sm-height col-sm-top">
      <div class="inside">
        <div class="content"></div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-middle">
      <div class="inside">
        <div class="content"></div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-1 col-sm-height col-sm-bottom">
      <div class="inside">
        <div class="content"></div>
      </div>
    </div>
   </div>
</div>

To have columns full height use the class .inside-full-height, it gives 100% height to the content container. But you can't apply margins to the content, and it does not work in ie.

<div class="row">
  <div class="row-height">
    <div class="col-xs-12 col-sm-6 col-sm-height">
      <div class="inside inside-full-height">
        <div class="content"><br><br><br><br><br><br><br></div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 col-sm-height col-sm-top">
      <div class="inside inside-full-height">
        <div class="content"></div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-middle">
      <div class="inside inside-full-height">
        <div class="content"></div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-1 col-sm-height col-sm-bottom">
      <div class="inside inside-full-height">
        <div class="content"></div>
      </div>
    </div>
  </div>
</div>

The Css

And here are the styles for the columns of same height, repeated for each responsive media query.

/* USAGE
<div class="row">
  <div class="row-height">
    <div class="col-xs-2 col-xs-height col-xs-middle">
      <div class="inside"></div>
    </div>
    <div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle">
      <div class="inside"></div>
    </div>
  </div>
</div>
*/

/* content styles */

.inside {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
  background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
.inside-full-height {
  /*
  // if you want to give content full height give him height: 100%;
  // with content full height you can't apply margins to the content
  // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
  */
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* columns of same height styles */

.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}

Restrictions

With column of same height in effect, you can have only one line of columns in the same row, and the line of columns is 100% of the row. if you want smaller columns you can use the "Columns width trick" in the demo, just contain the code with a new row and a col of the desired size.

Applying Boostrap "offset" breaks the layout, they're not supported by this solution. And "push" and "pull" they work but not in Internet Explorer.

IE8 Support

The code works also on IE8 only if you make Bootstrap 3 work on IE8. To make it work you need to use Respond.js and follow the respond.js guidelines:

  • Change the Bootstrap 3 Css netdna.bootstrapcdn.com to a local file: Respond.js only works with local Css files unless additional steps are taken.
  • Change the Css from a style element to an external local Css with link rel="stylesheet": Respond.js doesn't parse Css referenced via @import, nor does it work with media queries within style elements.
  • Reference the Respond.js script after all of your Css.