From a9e428a7287bd4c7e33e286979830137fc914587 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 00:46:00 -0800 Subject: [PATCH] Update grid docs to include new required .col base class --- docs/layout/grid.md | 120 ++++++++++++++++++++++---------------------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/docs/layout/grid.md b/docs/layout/grid.md index c318f5330a..029fcdfe23 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -35,13 +35,13 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start {% example html %}
-
+
One of three columns
-
+
One of three columns
-
+
One of three columns
@@ -246,36 +246,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu ### Example: Stacked-to-horizontal -Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`. +Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`.
{% example html %}
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
-
.col-md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
+
md-1
-
.col-md-8
-
.col-md-4
+
md-8
+
md-4
-
.col-md-4
-
.col-md-4
-
.col-md-4
+
md-4
+
md-4
+
md-4
-
.col-md-6
-
.col-md-6
+
md-6
+
md-6
{% endexample %}
@@ -288,21 +288,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small {% example html %}
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
+
.col .col-xs-12 .col-md-8
+
.col .col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
+
.col .col-xs-6 .col-md-4
+
.col .col-xs-6 .col-md-4
+
.col .col-xs-6 .col-md-4
-
.col-xs-6
-
.col-xs-6
+
.col .col-xs-6
+
.col .col-xs-6
{% endexample %}
@@ -314,15 +314,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
{% example html %}
-
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-xs-12 .col-sm-6 .col-md-8
+
.col .col-xs-6 .col-md-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col .col-xs-6 .col-sm-4
{% endexample %}
@@ -334,9 +334,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
{% example html %}
-
.col-xs-9
-
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
-
.col-xs-6
Subsequent columns continue along the new line.
+
.col .col-xs-9
+
.col .col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col .col-xs-6
Subsequent columns continue along the new line.
{% endexample %}
@@ -348,14 +348,14 @@ With the four tiers of grids available you're bound to run into issues where, at
{% example html %}
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
+
.col .col-xs-6 .col-sm-3
{% endexample %}
@@ -365,33 +365,33 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
{% example html %}
-
.col-sm-5 .col-md-6
-
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
+
.col .col-sm-5 .col-md-6
+
.col .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-
.col-sm-6 .col-md-5 .col-lg-6
-
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
+
.col.col-sm-6.col-md-5.col-lg-6
+
.col .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
{% endexample %}
### Example: Offsetting columns -Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns. +Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
{% example html %}
-
.col-md-4
-
.col-md-4 .col-md-offset-4
+
.col-md-4
+
.col-md-4 .offset-md-4
-
.col-md-3 .col-md-offset-3
-
.col-md-3 .col-md-offset-3
+
.col .col-md-3 .offset-md-3
+
.col .col-md-3 .offset-md-3
-
.col-md-6 .col-md-offset-3
+
.col .col-md-6 .offset-md-3
{% endexample %}
@@ -403,14 +403,14 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
{% example html %}
-
- Level 1: .col-sm-9 +
+ Level 1: .col .col-sm-9
-
- Level 2: .col-xs-8 .col-sm-6 +
+ Level 2: .col .col-xs-8 .col-sm-6
-
- Level 2: .col-xs-4 .col-sm-6 +
+ Level 2: .col .col-xs-4 .col-sm-6
@@ -425,8 +425,8 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
{% example html %}
-
.col-md-9 .col-md-push-3
-
.col-md-3 .col-md-pull-9
+
.col .col-md-9 .push-md-3
+
.col .col-md-3 .pull-md-9
{% endexample %}