diff --git a/docs/_includes/getting-started/examples.html b/docs/_includes/getting-started/examples.html index e6aed9bee5..bf87a2ceca 100644 --- a/docs/_includes/getting-started/examples.html +++ b/docs/_includes/getting-started/examples.html @@ -155,5 +155,12 @@

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

+
+ + + +

Equal-height grid columns

+

Adds automatic equal-height grid columns to Bootstrap's grid system.

+
diff --git a/docs/examples/equal-height-columns/equal-height-columns.css b/docs/examples/equal-height-columns/equal-height-columns.css new file mode 100644 index 0000000000..050467719b --- /dev/null +++ b/docs/examples/equal-height-columns/equal-height-columns.css @@ -0,0 +1,80 @@ +/* + * Row with equal height columns + * -------------------------------------------------- + */ +.row-eq-height { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +/* + * Styles copied from the Grid example to make grid rows & columns visible. + */ +.container { + padding-right: 15px; + padding-left: 15px; +} + +h4 { + margin-top: 25px; +} +.row { + margin-bottom: 20px; +} +.row .row { + margin-top: 10px; + margin-bottom: 0; +} +[class*="col-"] { + padding-top: 15px; + padding-bottom: 15px; + background-color: #eee; + background-color: rgba(86,61,124,.15); + border: 1px solid #ddd; + border: 1px solid rgba(86,61,124,.2); +} + +/* + * Callout styles copied from Bootstrap's main docs. + */ +/* Common styles for all types */ +.bs-callout { + padding: 20px; + margin: 20px 0; + border-left: 3px solid #eee; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} +.bs-callout code { + background-color: #fff; + border-radius: 3px; +} +/* Variations */ +.bs-callout-danger { + background-color: #fdf7f7; + border-color: #d9534f; +} +.bs-callout-danger h4 { + color: #d9534f; +} +.bs-callout-warning { + background-color: #fcf8f2; + border-color: #f0ad4e; +} +.bs-callout-warning h4 { + color: #f0ad4e; +} +.bs-callout-info { + background-color: #f4f8fa; + border-color: #5bc0de; +} +.bs-callout-info h4 { + color: #5bc0de; +} diff --git a/docs/examples/equal-height-columns/index.html b/docs/examples/equal-height-columns/index.html new file mode 100644 index 0000000000..8be0837f97 --- /dev/null +++ b/docs/examples/equal-height-columns/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + + Equal Height Columns Example for Bootstrap + + + + + + + + + + + + + + + +
+ +
+

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 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
+
+ + +
+ + + +