1 files changed, 104 insertions, 0 deletions
diff --git a/docs/examples/grid.html b/docs/examples/grid.html
new file mode 100644
index 000000000..14e8ecdf6
--- /dev/null
+++ b/docs/examples/grid.html
@@ -0,0 +1,104 @@
+---
+layout: example
+title: Grid template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  .container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  h4 {
+    margin-top: 25px;
+  }
+  .row {
+    margin-bottom: 20px;
+  }
+  .row .row {
+    margin-top: 10px;
+    margin-bottom: 0;
+  }
+  [class*="col-lg-"] {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background-color: rgba(185,74,72,.15);
+    border: 1px solid rgba(185,74,72,.2);
+  }
+</style>
+
+
+<div class="container">
+
+  <h2>Bootstrap grids</h2>
+  <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+
+  <h4>Three equal columns</h4>
+  <div class="row">
+    <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-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-lg-8">.col-lg-8</div>
+    <div class="col-lg-4">.col-lg-4</div>
+  </div>
+
+  <h4>Full width, single column</h4>
+  <p class="text-warning">No grid classes are necessary for full-width elements.</p>
+
+  <h4>Two columns with two nested columns</h4>
+  <div class="row">
+    <div class="col-lg-8">
+      .col-lg-8
+      <div class="row">
+        <div class="col-lg-6">.col-lg-6</div>
+        <div class="col-lg-6">.col-lg-6</div>
+      </div>
+    </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>
+
+
+</div> <!-- /container -->