diff --git a/docs/_includes/getting-started/examples.html b/docs/_includes/getting-started/examples.html index 49729f53ee..849d044c05 100644 --- a/docs/_includes/getting-started/examples.html +++ b/docs/_includes/getting-started/examples.html @@ -155,12 +155,5 @@

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 deleted file mode 100644 index 050467719b..0000000000 --- a/docs/examples/equal-height-columns/equal-height-columns.css +++ /dev/null @@ -1,80 +0,0 @@ -/* - * 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 deleted file mode 100644 index 2994b2837e..0000000000 --- a/docs/examples/equal-height-columns/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - 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 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
-
- - -
- - - -