Vertical alignment on Bootstrap 3 columns with equal height

The Markup

You have to add the class .row-same-height inside the row, and also add .col-xs-height to the columns.

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

If you want to restrict the effect to a certain media query, just use .col-sm-height or .col-md-height or .col-lg-height. You can also use different column sizes on each media query.

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

You choose the aligment of each column by using the classes .col-top or .col-middle or .col-bottom.

The Css

The styles for the columns of same height are three, repeated for each responsive media query.

/* columns of same height styles */
.row-same-height {
    display: table;
    width: 100%;
}
.col-xs-height {
    display: table-cell;
    float: none !important;
}

@media (min-width: 768px) {
    .col-sm-height {
        display: table-cell;
        float: none !important;
    }
}
@media (min-width: 992px) {
    .col-md-height {
        display: table-cell;
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .col-lg-height {
        display: table-cell;
        float: none !important;
    }
}

Then just add the alignments Css.

/* firefox fix */
.img-responsive {
    width: 100%;
}

/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

Restrictions

The columns are centered automatically, as you can see in the last demo, when columns of same height is in effect.

With column of same height in effect, you can have only one line of columns in the same row.

Applying Boostrap push, pulls and offset breaks the layout (on firefox the push and pulls), they're not supported by this solution.

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.