While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
diff --git a/css.html b/css.html
index 305d9f78ca..dd576df063 100644
--- a/css.html
+++ b/css.html
@@ -15,7 +15,7 @@ base_url: "../"
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
-
HTML5 doctype required
+
HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
{% highlight html %}
@@ -51,10 +51,10 @@ base_url: "../"
These styles can be found within scaffolding.less.
-
Normalize reset
+
Normalize
For improved cross-browser rendering, we use Normalize, a project by Nicolas Gallagher and Jonathan Neal.
-
Centering with container
+
Containers
Easily center a page's contents by wrapping its contents in a .container. Containers set max-width at various media query breakpoints to match our grid system.
{% highlight html %}
@@ -192,102 +192,102 @@ base_url: "../"
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.
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
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
+
.col-md-1
-
8
-
4
+
.col-md-8
+
.col-md-4
-
4
-
4
-
4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
6
-
6
+
.col-md-6
+
.col-md-6
{% highlight html %}
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
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
+
.col-md-1
-
8
-
4
+
.col-md-8
+
.col-md-4
-
4
-
4
-
4
+
.col-md-4
+
.col-md-4
+
.col-md-4
-
6
-
6
+
.col-md-6
+
.col-md-6
{% endhighlight %}
-
Example: Combining mobile with desktop
+
Example: Mobile and desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
-
8
-
4
+
.col-xs-12 col-md-8
+
.col-xs-6 .col-md-4
-
4
-
4
-
4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
6
-
6
+
.col-xs-6
+
.col-xs-6
{% highlight html %}
-
8
-
4
+
.col-xs-12 col-md-8
+
.col-xs-6 .col-md-4
-
4
-
4
-
4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
-
6
-
6
+
.col-xs-6
+
.col-xs-6
{% endhighlight %}
-
Example: Mobile, tablet, and desktop
+
Example: Mobile, tablet, desktops
Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
@@ -348,28 +348,28 @@ base_url: "../"
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.
+
.col-md-4
+
.col-md-4 .col-md-offset-4
+
-
3 offset 3
-
3 offset 3
-
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
+
+
.col-md-6 .col-md-offset-3
+
{% highlight html %}
-
...
-
...
+
.col-md-4
+
.col-md-4 .col-md-offset-4
-
3 offset 3
-
3 offset 3
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
-
...
+
.col-md-6 .col-md-offset-3
{% endhighlight %}
@@ -378,13 +378,13 @@ base_url: "../"
To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.
- Level 1: 9 columns
+ Level 1: .col-md-9
- Level 2: 6 columns
+ Level 2: .col-md-6
- Level 2: 6 columns
+ Level 2: .col-md-6
@@ -392,13 +392,13 @@ base_url: "../"
{% highlight html %}
- Level 1: 9 columns
+ Level 1: .col-md-9
- Level 2: 6 columns
+ Level 2: .col-md-6
- Level 2: 6 columns
+ Level 2: .col-md-6
@@ -408,14 +408,14 @@ base_url: "../"
Column ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
-
9
-
3
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
{% highlight html %}
-
9
-
3
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
{% endhighlight %}
@@ -607,27 +607,27 @@ base_url: "../"
- Bootstrap heading |
+ h1. Bootstrap heading |
Semibold 38px |
- Bootstrap heading |
+ h2. Bootstrap heading |
Semibold 32px |
- Bootstrap heading |
+ h3. Bootstrap heading |
Semibold 24px |
- Bootstrap heading |
+ h4. Bootstrap heading |
Semibold 18px |
- Bootstrap heading |
+ h5. Bootstrap heading |
Semibold 14px |
- Bootstrap heading |
+ h6. Bootstrap heading |
Semibold 12px |
@@ -1061,10 +1061,7 @@ For example, <section> should be wrapped as inline.
{% endhighlight %}
- Optional classes
- Add any of the following classes to the .table base class.
-
- Striped
+ Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Cross-browser compatibility
@@ -1108,7 +1105,8 @@ For example, <section> should be wrapped as inline.
{% endhighlight %}
-
Bordered
+
+
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
@@ -1152,7 +1150,8 @@ For example, <section> should be wrapped as inline.
{% endhighlight %}
-
Hover rows
+
+
Hover rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
@@ -1192,7 +1191,7 @@ For example, <section> should be wrapped as inline.
{% endhighlight %}
- Condensed
+ Condensed table
Add .table-condensed to make tables more compact by cutting cell padding in half.
@@ -1233,7 +1232,7 @@ For example, <section> should be wrapped as inline.
- Contextual table classes
+ Contextual classes
Use contextual classes to color table rows or individual cells.