Bootstrap equal-height columns experiment

A simple experiment that adds flexbox-based equal-height columns to Bootstrap's grid system.

Normal row (with unequal-height columns)

For comparison, here's a normal row, without .row-eq-height.

.row > .col-xs-4
.row > .col-xs-4
this is
a much
taller
column
than the others
.row > .col-xs-4

Row with equal-height columns

This row uses the custom .row-eq-height class defined in this example's CSS to make all of its columns automatically be of equal height.

All of the columns will stretch vertically to occupy the same height as the tallest column.

.row.row-eq-height > .col-xs-4
.row.row-eq-height > .col-xs-4
this is
a much
taller
column
than the others
.row.row-eq-height > .col-xs-4

Warning: Browser compatibility

The .row-eq-height class uses CSS3's flexbox layout mode, which is not supported in Internet Explorer 9 and below.

In any unsupported browser, the .row-eq-height class will have no effect.

For more info on browser support for flexbox, please consult "Can I use...".

Warning: Changes column wrapping behavior

If you have put more than 12 columns in one .row-eq-height, the columns will be forced to shrink into a single row, instead of wrapping onto a new line as they normally would.

Equal-height row with more than 12 columns

.row.row-eq-height > .col-xs-4
.row.row-eq-height > .col-xs-4
.row.row-eq-height > .col-xs-4
.row.row-eq-height > .col-xs-4
This and subsequent columns would normally have wrapped onto a new line,
if not for .row-eq-height.
.row.row-eq-height > .col-xs-4