docs changes, more type improvements, add grid system basics back

6 files changed, 354 insertions, 238 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6f19543cd..f32eba178 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -19,14 +19,19 @@ body {
   font-size: 14px;
   font-size: 1.4rem;
   line-height: 1.5;
-  color: #333;
+  color: #3a3a3a;
 }
 p {
-  margin: 15px 0;
+  margin: 0 0 10px;
 }
 .lead {
-  font-size: 2rem;
-  font-size: 20px;
+  font-size: 18px;
+  font-size: 1.8rem;
+}
+.page-header {
+  margin-top: 30px;
+  margin-bottom: 19px;
+  border-bottom: 1px solid #ddd;
 }
 
 
@@ -42,7 +47,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 1rem 0;
+  margin: 20px 0 10px;
   color: inherit;
   font-family: inherit;
   font-weight: 500;
@@ -76,10 +81,8 @@ h4 {
 h5 {
   font-size: 16px;
   font-size: 1.6rem;
-  margin-bottom: 1.5em;
 }
 h6 {
-  margin-bottom: 1.5em;
   font-weight: normal;
   letter-spacing: 1px;
   text-transform: uppercase;
@@ -97,6 +100,23 @@ li ol {
   margin-bottom: 0;
 }
 
+hr {
+  margin: 20px 0 19px;
+  border: 0;
+  border-top: 1px solid #ddd;
+}
+
+pre, code {
+  color: #c7254e;
+}
+code {
+  padding: 1px 3px;
+  font-size: 90%;
+  white-space: nowrap;
+  border-radius: 3px;
+  background-color: #f9f2f4;
+}
+
 
 a {
   color: #428bca;
@@ -128,9 +148,39 @@ a:hover {
   display: block;
 }
 .nav > li > a {
+  position: relative;
   display: block;
   padding: 10px 15px;
 }
+.nav > li > a:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+
+.nav-list > li > a {
+  margin-bottom: -1px; /* tuck up the following item to make 1px border */
+  border: 1px solid #ddd;
+}
+.nav-list > li:first-child > a {
+   border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.nav-list > li:last-child > a {
+  margin-bottom: 0; /* undo the tuck */
+   border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
+  color: #fff;
+  background-color: #428bca;
+  border-color: #428bca;
+  z-index: 2; /* Bring active item forward so border sits on top of next element */
+}
+
+
+
 
 
 .navbar {
@@ -141,10 +191,11 @@ a:hover {
 
 .navbar .brand {
   display: inline-block;
-  padding: 4px 15px;
+  padding: 7px 15px;
   font-size: 1.8rem;
   font-size: 18px;
   font-weight: bold;
+  line-height: 1;
 }
 .navbar .brand:hover {
   text-decoration: none;
@@ -155,9 +206,9 @@ a:hover {
   margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */
 }
 .navbar .nav > li > a {
+  line-height: 20px;
 }
 .navbar .nav > li > a:hover {
-  text-decoration: none;
   background-color: #ddd;
 }
 .navbar .nav > .active > a {
@@ -166,21 +217,20 @@ a:hover {
 
 .btn-navbar {
   float: right;
-  margin-top: 3px;
-  padding: 8px 10px;
+  padding: 10px 12px;
   background-color: #ddd;
   border: 0;
   border-radius: 4px;
 }
 .btn-navbar .icon-bar {
   display: block;
-  width: 18px;
-  height: 3px;
+  width: 20px;
+  height: 2px;
   background-color: #fff;
   border-radius: 1px;
 }
 .btn-navbar .icon-bar + .icon-bar {
-  margin-top: 2px;
+  margin-top: 3px;
 }
 
 
@@ -208,6 +258,22 @@ a:hover {
 
 
 
+
+
+
+.row {
+  margin-left: -10px;
+  margin-right: -10px;
+  overflow: hidden; /* clearfix */
+}
+[class^="span"] {
+  padding-left: 10px;
+  padding-right: 10px;
+  -webkit-box-sizing: border-box;
+}
+
+
+
 /* Disable iOS/WinMobile font size changes */
 @media screen and (max-device-width: 480px) {
   html {
@@ -232,14 +298,30 @@ a:hover {
   h5 {  }
   h6 {  }
 
+  [class^="span"] {
+    float: left;
+  }
+
+  .span1 { width: 8.3333333%; }
+  .span2 { width: 16.6666667%; }
+  .span3 { width: 25%; }
+  .span4 { width: 33.3333333%; }
+  .span5 { width: 41.666666667%; }
+  .span6 { width: 50%; }
+  .span7 { width: 58.333333333%; }
+  .span8 { width: 66.666666667%; }
+  .span9 { width: 75%; }
+  .span10 { width: 83.333333333%; }
+  .span11 { width: 91.666666667%; }
+
 }
 @media screen and (min-width: 992px) {
 
-  body {
+/*  body {
     font-size: 1.6rem;
     font-size: 16px;
   }
-
+*/
   .container {
     width: 940px;
     margin-left: auto;
@@ -252,8 +334,9 @@ a:hover {
   }
   .navbar .brand {
     float: left;
-    padding-top: 7px;
-    padding-bottom: 7px;
+    padding-top: 11px;
+    padding-bottom: 11px;
+    margin-left: -15px;
   }
   .navbar .nav {
     overflow: hidden; /* clearfix */
@@ -272,6 +355,7 @@ a:hover {
     display: none;
   }
   .nav-collapse.collapse {
+    float: left;
     height: auto !important;
     overflow: visible !important;
   }
@@ -296,11 +380,39 @@ body > .container {
 ------------------------- */
 .bs-docs-jumbotron {
   position: relative;
-  padding: 15px;
+  margin-bottom: 20px;
+  padding: 30px 15px;
   color: #fff;
   background-color: #b94a48;
 }
 .bs-docs-jumbotron h1 {
+  margin: 0;
 }
 .bs-docs-jumbotron p {
-}
\ No newline at end of file
+  margin-bottom: 0;
+}
+
+
+
+
+.bs-docs-example {
+  border: 1px solid #ddd;
+  padding: 14px;
+  margin-bottom: -1px;
+}
+.bs-docs-example + .prettyprint {
+  margin-top: 0;
+}
+
+
+
+
+
+.show-grid [class^="span"] {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #eee;
+  border: 1px solid #ddd;
+}
+
+
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index cc442ade4..4fd6d3617 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -34,12 +34,12 @@
     })
 
     // add tipsies to grid for scaffolding
-    if ($('#gridSystem').length) {
-      $('#gridSystem').tooltip({
-          selector: '.show-grid > div:not(.tooltip)'
-        , title: function () { return $(this).width() + 'px' }
-      })
-    }
+    // if ($('#gridSystem').length) {
+    //   $('#gridSystem').tooltip({
+    //       selector: '.show-grid > div:not(.tooltip)'
+    //     , title: function () { return $(this).width() + 'px' }
+    //   })
+    // }
 
     // tooltip demo
     $('.tooltip-demo').tooltip({
diff --git a/docs/css.html b/docs/css.html
index 65c876b2b..5054df37b 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -84,9 +84,9 @@
       <div class="span3 bs-docs-sidebar">
         <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
-          <li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
           <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
           <li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
+          <li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
           <li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li>
           <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
           <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
@@ -132,107 +132,6 @@
 
 
 
-        <!-- Grid system
-        ================================================== -->
-        <section id="gridSystem">
-          <div class="page-header">
-            <h1>Grid system</h1>
-          </div>
-
-          <h2>Live grid example</h2>
-          <p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-            </div>
-            <div class="row show-grid">
-              <div class="span4">4</div>
-              <div class="span4">4</div>
-              <div class="span4">4</div>
-            </div>
-            <div class="row show-grid">
-              <div class="span6">6</div>
-              <div class="span6">6</div>
-            </div>
-            <div class="row show-grid">
-              <div class="span12">12</div>
-            </div>
-          </div>
-
-          <h3>Basic grid HTML</h3>
-          <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> 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).</p>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span4"&gt;...&lt;/div&gt;
-  &lt;div class="span8"&gt;...&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-          <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
-
-          <h2>Offsetting columns</h2>
-          <p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="span4">4</div>
-              <div class="span4 offset4">4 offset 4</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="span3 offset3">3 offset 3</div>
-              <div class="span3 offset3">3 offset 3</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="span6 offset6">6 offset 6</div>
-            </div><!-- /row -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span4"&gt;...&lt;/div&gt;
-  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-
-          <h2>Nesting columns</h2>
-          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
-          <div class="row show-grid">
-            <div class="span9">
-              Level 1: 9 columns
-              <div class="row show-grid">
-                <div class="span6">
-                  Level 2: 6 columns
-                </div>
-                <div class="span6">
-                  Level 2: 6 columns
-                </div>
-              </div>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span9"&gt;
-    Level 1: 9 columns
-    &lt;div class="row"&gt;
-      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
-      &lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-        </section>
-
-
-
 
         <!-- Typography
         ================================================== -->
@@ -586,6 +485,106 @@
 
 
 
+        <!-- Grid system
+        ================================================== -->
+        <section id="gridSystem">
+          <div class="page-header">
+            <h1>Grid system</h1>
+          </div>
+
+          <h2>Live grid example</h2>
+          <p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
+          <div class="bs-docs-grid">
+            <div class="row show-grid">
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+            </div>
+            <div class="row show-grid">
+              <div class="span4">4</div>
+              <div class="span4">4</div>
+              <div class="span4">4</div>
+            </div>
+            <div class="row show-grid">
+              <div class="span6">6</div>
+              <div class="span6">6</div>
+            </div>
+          </div>
+
+          <h3>Basic grid HTML</h3>
+          <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> 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).</p>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+          <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
+
+          <h2>Offsetting columns</h2>
+          <p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
+          <div class="bs-docs-grid">
+            <div class="row show-grid">
+              <div class="span4">4</div>
+              <div class="span4 offset4">4 offset 4</div>
+            </div><!-- /row -->
+            <div class="row show-grid">
+              <div class="span3 offset3">3 offset 3</div>
+              <div class="span3 offset3">3 offset 3</div>
+            </div><!-- /row -->
+            <div class="row show-grid">
+              <div class="span6 offset6">6 offset 6</div>
+            </div><!-- /row -->
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+          <h2>Nesting columns</h2>
+          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
+          <div class="row show-grid">
+            <div class="span9">
+              Level 1: 9 columns
+              <div class="row show-grid">
+                <div class="span6">
+                  Level 2: 6 columns
+                </div>
+                <div class="span6">
+                  Level 2: 6 columns
+                </div>
+              </div>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span9"&gt;
+    Level 1: 9 columns
+    &lt;div class="row"&gt;
+      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
+      &lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+        </section>
+
+
+
+
+
         <!-- Code
         ================================================== -->
         <section id="code">
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 99996c4f8..b9ed5809d 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -135,12 +135,15 @@
   ├── js/
   │   ├── bootstrap.js
   │   ├── bootstrap.min.js
-  └── img/
-      ├── glyphicons-halflings.png
-      └── glyphicons-halflings-white.png
+  └── fonts/
+      ├── glyphiconshalflings-regular.eot
+      ├── glyphiconshalflings-regular.otf
+      ├── glyphiconshalflings-regular.svg
+      ├── glyphiconshalflings-regular.ttf
+      └── glyphiconshalflings-regular.woff
 </pre>
           <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
-          <p>Please note that all JavaScript plugins require jQuery to be included.</p>
+          <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
         </section>
 
 
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index f3209f1e8..92cf57dff 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -16,9 +16,9 @@
       <div class="span3 bs-docs-sidebar">
         <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
-          <li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
           <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
           <li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
+          <li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
           <li><a href="#tables"><i class="glyphicon-chevron-right"></i> Tables</a></li>
           <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li>
           <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li>
@@ -64,107 +64,6 @@
 
 
 
-        <!-- Grid system
-        ================================================== -->
-        <section id="gridSystem">
-          <div class="page-header">
-            <h1>Grid system</h1>
-          </div>
-
-          <h2>Live grid example</h2>
-          <p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-              <div class="span1">1</div>
-            </div>
-            <div class="row show-grid">
-              <div class="span4">4</div>
-              <div class="span4">4</div>
-              <div class="span4">4</div>
-            </div>
-            <div class="row show-grid">
-              <div class="span6">6</div>
-              <div class="span6">6</div>
-            </div>
-            <div class="row show-grid">
-              <div class="span12">12</div>
-            </div>
-          </div>
-
-          <h3>Basic grid HTML</h3>
-          <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> 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).</p>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span4"&gt;...&lt;/div&gt;
-  &lt;div class="span8"&gt;...&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-          <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
-
-          <h2>Offsetting columns</h2>
-          <p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
-          <div class="bs-docs-grid">
-            <div class="row show-grid">
-              <div class="span4">4</div>
-              <div class="span4 offset4">4 offset 4</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="span3 offset3">3 offset 3</div>
-              <div class="span3 offset3">3 offset 3</div>
-            </div><!-- /row -->
-            <div class="row show-grid">
-              <div class="span6 offset6">6 offset 6</div>
-            </div><!-- /row -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span4"&gt;...&lt;/div&gt;
-  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-
-          <h2>Nesting columns</h2>
-          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
-          <div class="row show-grid">
-            <div class="span9">
-              Level 1: 9 columns
-              <div class="row show-grid">
-                <div class="span6">
-                  Level 2: 6 columns
-                </div>
-                <div class="span6">
-                  Level 2: 6 columns
-                </div>
-              </div>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="row"&gt;
-  &lt;div class="span9"&gt;
-    Level 1: 9 columns
-    &lt;div class="row"&gt;
-      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
-      &lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-        </section>
-
-
-
 
         <!-- Typography
         ================================================== -->
@@ -526,6 +425,106 @@
 
 
 
+        <!-- Grid system
+        ================================================== -->
+        <section id="gridSystem">
+          <div class="page-header">
+            <h1>Grid system</h1>
+          </div>
+
+          <h2>Live grid example</h2>
+          <p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
+          <div class="bs-docs-grid">
+            <div class="row show-grid">
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+              <div class="span1">1</div>
+            </div>
+            <div class="row show-grid">
+              <div class="span4">4</div>
+              <div class="span4">4</div>
+              <div class="span4">4</div>
+            </div>
+            <div class="row show-grid">
+              <div class="span6">6</div>
+              <div class="span6">6</div>
+            </div>
+          </div>
+
+          <h3>Basic grid HTML</h3>
+          <p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> 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).</p>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+          <p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
+
+          <h2>Offsetting columns</h2>
+          <p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
+          <div class="bs-docs-grid">
+            <div class="row show-grid">
+              <div class="span4">4</div>
+              <div class="span4 offset4">4 offset 4</div>
+            </div><!-- /row -->
+            <div class="row show-grid">
+              <div class="span3 offset3">3 offset 3</div>
+              <div class="span3 offset3">3 offset 3</div>
+            </div><!-- /row -->
+            <div class="row show-grid">
+              <div class="span6 offset6">6 offset 6</div>
+            </div><!-- /row -->
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span4 offset4"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+
+          <h2>Nesting columns</h2>
+          <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
+          <div class="row show-grid">
+            <div class="span9">
+              Level 1: 9 columns
+              <div class="row show-grid">
+                <div class="span6">
+                  Level 2: 6 columns
+                </div>
+                <div class="span6">
+                  Level 2: 6 columns
+                </div>
+              </div>
+            </div>
+          </div>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span9"&gt;
+    Level 1: 9 columns
+    &lt;div class="row"&gt;
+      &lt;div class="span6"&gt;Level 2: 6 columns&lt;/div&gt;
+      &lt;div class="span3"&gt;Level 2: 6 columns&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+        </section>
+
+
+
+
+
         <!-- Code
         ================================================== -->
         <section id="code">
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache
index 6330e6e11..4ca6d630b 100644
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -67,12 +67,15 @@
   ├── js/
   │   ├── bootstrap.js
   │   ├── bootstrap.min.js
-  └── img/
-      ├── glyphicons-halflings.png
-      └── glyphicons-halflings-white.png
+  └── fonts/
+      ├── glyphiconshalflings-regular.eot
+      ├── glyphiconshalflings-regular.otf
+      ├── glyphiconshalflings-regular.svg
+      ├── glyphiconshalflings-regular.ttf
+      └── glyphiconshalflings-regular.woff
 </pre>
           <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
-          <p>Please note that all JavaScript plugins require jQuery to be included.</p>
+          <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included.</p>
         </section>