Bootstrap 3 responsive columns of same height

Vertical alignment on Bootstrap 3 columns with equal height

The Solution

The Markup

You have to add the classes .container-xs-height and .row-xs-height to the container and the row, and also add .col-xs-height to the columns.

<div class="container container-xs-height">
    <div class="row row-xs-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, also replacing xs in the container and in the row classes. You can also use different column sizes on each media query.

<div class="container container-sm-height">
    <div class="row row-sm-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.

We have to remove the padding on the container because setting the .row to display:table-row removes the negative margins of Bootstrap rows.

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display:table-row;
}
.col-xs-height {
    display:table-cell;
    float:none;
}
@media (min-width: 768px) {
    .container-sm-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-sm-height {
        display:table-row;
    }
    .col-sm-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 992px) {
    .container-md-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-md-height {
        display:table-row;
    }
    .col-md-height {
        display:table-cell;
        float:none;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}

Then just add the alignments Css.

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

Features and Restrictions

The columns are centered automatically, as you can see in the demo, but only when columns of same height is in effect. If you need to center columns on multiple lines check out the article Bootstrap3 centered columns.

With column of same height in effect, you can have only one line of columns in the same row. But you can have multiple lines of columns outside the media query you specified (although not of same height).