A simple experiment that adds flexbox-based equal-height columns to Bootstrap's grid system.
For comparison, here's a normal row, without
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-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...".
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.