@@ -351,81 +351,81 @@ title: Bootstrap Documentation
On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply float
s and width
s. To create a basic grid layout, wrap a series of .col-span-*
elements within a .row
. As this is a 12-column grid, each .col-span-*
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.
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
{% highlight html %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
{% endhighlight %}
Offsetting columns
-
Move columns to the right using .col-offset-*
classes. These classes increase the left margin of a column by *
columns. For example, .col-offset-4
moves .col col-lg-4
over four columns.
+
Move columns to the right using .col-offset-*
classes. These classes increase the left margin of a column by *
columns. For example, .col-offset-4
moves .col-lg-4
over four columns.
-
4
-
4 offset 4
+
4
+
4 offset 4
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 3
{% highlight html %}
-
3 offset 3
-
3 offset 3
+
3 offset 3
+
3 offset 3
{% endhighlight %}
@@ -433,13 +433,13 @@ title: Bootstrap Documentation
Nesting columns
To nest your content with the default grid, add a new .row
and set of .col-span-*
columns within an existing .col-span-*
column. Nested rows should include a set of columns that add up to 12.
-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
@@ -447,13 +447,13 @@ title: Bootstrap Documentation
{% highlight html %}
-
+
Level 1: 9 columns
-
+
Level 2: 6 columns
-
@@ -464,29 +464,29 @@ title: Bootstrap Documentation
Column ordering
Easily change the order of our built-in grid columns with .col-push-*
and .col-pull-*
modifier classes.
{% highlight html %}
{% endhighlight %}
Small device grid
Use the small device grid classes, like .col-sm-6
, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.
-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
{% highlight html %}
-
4 cols, 6 small cols
-
4 cols, 6 small cols
-
4 cols, 12 small cols
+
4 cols, 6 small cols
+
4 cols, 6 small cols
+
4 cols, 12 small cols
{% endhighlight %}
@@ -1199,8 +1199,8 @@ For example,
<section>
should be wrapped as inline.
Use contextual classes to color table rows.