more accurate grid classes in examples

diff --git a/css.html b/css.html
index ad48dcb09e2021b10d41aa5f2f37dae667fd4cd5..b8403fa6fb0344d24673d2c0115050303b54b9e1 100644 (file)
--- a/css.html
+++ b/css.html
@@ -192,60 +192,60 @@ base_url: "../"
     <p>Using a single set of <code>.col-md-*</code> 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.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
-        <div class="col-md-1">1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
+        <div class="col-md-1">.col-md-1</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-8">8</div>
-        <div class="col-md-4">4</div>
+        <div class="col-md-8">.col-md-8</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-4">4</div>
-        <div class="col-md-4">4</div>
-        <div class="col-md-4">4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-md-6">6</div>
-        <div class="col-md-6">6</div>
+        <div class="col-md-6">.col-md-6</div>
+        <div class="col-md-6">.col-md-6</div>
       </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
-  <div class="col-md-1">1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
+  <div class="col-md-1">.col-md-1</div>
 </div>
 <div class="row">
-  <div class="col-md-8">8</div>
-  <div class="col-md-4">4</div>
+  <div class="col-md-8">.col-md-8</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-md-4">4</div>
-  <div class="col-md-4">4</div>
-  <div class="col-md-4">4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
-  <div class="col-md-6">6</div>
-  <div class="col-md-6">6</div>
+  <div class="col-md-6">.col-md-6</div>
+  <div class="col-md-6">.col-md-6</div>
 </div>
 {% endhighlight %}
 
@@ -253,37 +253,37 @@ base_url: "../"
     <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-xs-12 col-md-8">8</div>
-        <div class="col-xs-6 col-md-4">4</div>
+        <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-xs-6 col-md-4">4</div>
-        <div class="col-xs-6 col-md-4">4</div>
-        <div class="col-xs-6 col-md-4">4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
       </div>
       <div class="row show-grid">
-        <div class="col-xs-6 col-md-6">6</div>
-        <div class="col-xs-6 col-md-6">6</div>
+        <div class="col-xs-6">.col-xs-6</div>
+        <div class="col-xs-6">.col-xs-6</div>
       </div>
     </div>
 {% highlight html %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
-  <div class="col-xs-12 col-md-8">8</div>
-  <div class="col-xs-6 col-md-4">4</div>
+  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 
 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-4">4</div>
-  <div class="col-xs-6 col-md-4">4</div>
-  <div class="col-xs-6 col-md-4">4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
 
 <!-- Columns are always 50% wide, on mobile and desktop -->
 <div class="row">
-  <div class="col-xs-6 col-md-6">6</div>
-  <div class="col-xs-6 col-md-6">6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
 </div>
 {% endhighlight %}
 
@@ -348,28 +348,28 @@ base_url: "../"
     <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
     <div class="bs-docs-grid">
       <div class="row show-grid">
-        <div class="col-md-4">4</div>
-        <div class="col-md-4 col-md-offset-4">4 offset 4</div>
-      </div><!-- /row -->
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+      </div>
       <div class="row show-grid">
-        <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-        <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-      </div><!-- /row -->
+        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+      </div>
       <div class="row show-grid">
-        <div class="col-md-6 col-md-offset-3">6 offset 3</div>
-      </div><!-- /row -->
+        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+      </div>
     </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-4">...</div>
-  <div class="col-md-4 col-md-offset-4">...</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
 </div>
 <div class="row">
-  <div class="col-md-3 col-md-offset-3">3 offset 3</div>
-  <div class="col-md-3 col-md-offset-3">3 offset 3</div>
+  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 </div>
 <div class="row">
-  <div class="col-md-6 col-md-offset-3">...</div>
+  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
 </div>
 {% endhighlight %}
 
@@ -378,13 +378,13 @@ base_url: "../"
     <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
     <div class="row show-grid">
       <div class="col-md-9">
-        Level 1: 9 columns
+        Level 1: .col-md-9
         <div class="row show-grid">
           <div class="col-md-6">
-            Level 2: 6 columns
+            Level 2: .col-md-6
           </div>
           <div class="col-md-6">
-            Level 2: 6 columns
+            Level 2: .col-md-6
           </div>
         </div>
       </div>
@@ -392,13 +392,13 @@ base_url: "../"
 {% highlight html %}
 <div class="row">
   <div class="col-md-9">
-    Level 1: 9 columns
+    Level 1: .col-md-9
     <div class="row">
       <div class="col-md-6">
-        Level 2: 6 columns
+        Level 2: .col-md-6
       </div>
       <div class="col-md-6">
-        Level 2: 6 columns
+        Level 2: .col-md-6
       </div>
     </div>
   </div>
@@ -408,14 +408,14 @@ base_url: "../"
     <h3 id="grid-column-ordering">Column ordering</h3>
     <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
     <div class="row show-grid">
-      <div class="col-md-9 col-md-push-3">9</div>
-      <div class="col-md-3 col-md-pull-9">3</div>
+      <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+      <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
     </div>
 
 {% highlight html %}
 <div class="row">
-  <div class="col-md-9 col-md-push-3">9</div>
-  <div class="col-md-3 col-md-pull-9">3</div>
+  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
 </div>
 {% endhighlight %}