diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index e389eaf6e9..9221cac1bd 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -25,7 +25,7 @@ body { color: #fff; } .bs-docs-nav .navbar-nav > li > a { - color: #dfc9c8; + color: #e6cac8; } .bs-docs-nav .navbar-nav > li > a:hover { color: #fff; diff --git a/docs/css.html b/docs/css.html index be4e130985..264d4c672c 100644 --- a/docs/css.html +++ b/docs/css.html @@ -67,6 +67,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."

Grid example

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-lg-* elements within a .row. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

+

Be sure to checkout the full-page grid example as well.

1
diff --git a/docs/examples/grid.html b/docs/examples/grid.html index eea2ac0cf2..d14602e4ec 100644 --- a/docs/examples/grid.html +++ b/docs/examples/grid.html @@ -11,9 +11,16 @@ title: Grid template padding-right: 15px; } + h4 { + margin-top: 25px; + } .row { margin-bottom: 20px; } + .row .row { + margin-top: 10px; + margin-bottom: 0; + } [class*="col-lg-"] { padding-top: 15px; padding-bottom: 15px; @@ -49,6 +56,19 @@ title: Grid template

Full width, single column

-

No grid classes are necessary for full-width elements.

+

No grid classes are necessary for full-width elements.

+ +

Two columns with two nested columns

+
+
+ .col .col-lg-8 +
+
.col .col-lg-6
+
.col .col-lg-6
+
+
+
.col .col-lg-4
+
+