1 files changed, 45 insertions, 15 deletions
diff --git a/docs/examples/grid.html b/docs/examples/grid.html
index d14602e4e..14e8ecdf6 100644
--- a/docs/examples/grid.html
+++ b/docs/examples/grid.html
@@ -24,8 +24,8 @@ title: Grid template
   [class*="col-lg-"] {
     padding-top: 15px;
     padding-bottom: 15px;
-    background-color: #f5f5f5;
-    border: 1px solid #e5e5e5;
+    background-color: rgba(185,74,72,.15);
+    border: 1px solid rgba(185,74,72,.2);
   }
 </style>
 
@@ -37,22 +37,22 @@ title: Grid template
 
   <h4>Three equal columns</h4>
   <div class="row">
-    <div class="col col-lg-4">.col .col-lg-4</div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
   </div>
 
   <h4>Three unequal columns</h4>
   <div class="row">
-    <div class="col col-lg-3">.col .col-lg-3</div>
-    <div class="col col-lg-6">.col .col-lg-6</div>
-    <div class="col col-lg-3">.col .col-lg-3</div>
+    <div class="col-lg-3">.col-lg-3</div>
+    <div class="col-lg-6">.col-lg-6</div>
+    <div class="col-lg-3">.col-lg-3</div>
   </div>
 
   <h4>Two columns</h4>
   <div class="row">
-    <div class="col col-lg-8">.col .col-lg-8</div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col-lg-8">.col-lg-8</div>
+    <div class="col-lg-4">.col-lg-4</div>
   </div>
 
   <h4>Full width, single column</h4>
@@ -60,14 +60,44 @@ title: Grid template
 
   <h4>Two columns with two nested columns</h4>
   <div class="row">
-    <div class="col col-lg-8">
-      .col .col-lg-8
+    <div class="col-lg-8">
+      .col-lg-8
       <div class="row">
-        <div class="col col-lg-6">.col .col-lg-6</div>
-        <div class="col col-lg-6">.col .col-lg-6</div>
+        <div class="col-lg-6">.col-lg-6</div>
+        <div class="col-lg-6">.col-lg-6</div>
       </div>
     </div>
-    <div class="col col-lg-4">.col .col-lg-4</div>
+    <div class="col-lg-4">.col-lg-4</div>
+  </div>
+
+  <h4>Mixed: mobile and desktop</h4>
+  <div class="row">
+    <div class="col-12 col-lg-8">.col-12 .col-lg-8</div>
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
+    <div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
+  </div>
+
+  <h4>Mixed: mobile, tablet, and desktop</h4>
+  <div class="row">
+    <div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+    <div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
+  </div>
+  <div class="row">
+    <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
+    <div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
   </div>