overhaul docs on sub pages, clean up css and copy

docs/assets/css/docs.css

@@ -12,12 +12,8 @@
 
 body {
   position: relative;
-  padding-top: 80px;
+  padding-top: 40px;
   font-size: 14px;
-  background-color: #fff;
-  background-image: url(../img/grid-20px.png);
-  background-repeat: repeat-x;
-  background-position: 0 40px;
 }
 
 /* Code in headings */
@@ -87,7 +83,22 @@ hr.soften {
 ------------------------- */
 .jumbotron {
   position: relative;
+  padding: 40px 0;
+  color: #fff;
   text-align: center;
+  text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
+  background: #020031; /* Old browsers */
+  background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */
+  background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+     -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+          box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+
 }
 .jumbotron h1 {
   font-size: 80px;
@@ -118,22 +129,8 @@ hr.soften {
 ------------------------- */
 .masthead {
   padding: 50px 0 60px;
-  margin-top: -40px;
   margin-bottom: 0;
   color: #fff;
-  text-align: center;
-  text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
-  background: #020031; /* Old browsers */
-  background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */
-  background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-     -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-          box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
 }
 .masthead h1 {
   font-size: 120px;
@@ -211,6 +208,9 @@ hr.soften {
 .subhead h1 {
   font-size: 60px;
 }
+.subhead p {
+  margin-bottom: 10px;
+}
 .subhead .navbar {
   display: none;
 }
@@ -736,7 +736,7 @@ form.bs-docs-example {
     padding-top: 0;
   }
   /* Widen masthead and social buttons to fill body padding */
-  .masthead {
+  .jumbotron {
     margin-top:   -20px; /* Offset bottom margin on .navbar */
   }
 }
@@ -750,7 +750,7 @@ form.bs-docs-example {
   }
 
   /* Widen masthead and social buttons to fill body padding */
-  .masthead {
+  .jumbotron {
     padding: 40px 20px;
     margin-top:   -20px; /* Offset bottom margin on .navbar */
     margin-right: -20px;

docs/base-css.html

@@ -66,15 +66,16 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>Base CSS</h1>
-  <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
+    <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.</p>
+  </div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav

docs/components.html

@@ -66,15 +66,16 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>Components</h1>
-  <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
+    <p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
+  </div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav
@@ -89,8 +90,7 @@
         <li><a href="#navbar">Navbar <i class="icon-chevron-right"></i></a></li>
         <li><a href="#breadcrumbs">Breadcrumbs <i class="icon-chevron-right"></i></a></li>
         <li><a href="#pagination">Pagination <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#labels">Labels <i class="icon-chevron-right"></i></a></li>
+        <li><a href="#labels-badges">Labels and badges <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#badges">Badges <i class="icon-chevron-right"></i></a></li>
         <li><a href="#typography">Typography <i class="icon-chevron-right"></i></a></li>
         <li><a href="#thumbnails">Thumbnails <i class="icon-chevron-right"></i></a></li>
         <li><a href="#alerts">Alerts <i class="icon-chevron-right"></i></a></li>
@@ -1492,12 +1492,13 @@
 
 
 
-    <!-- Labels
+      <!-- Labels and badges
       ================================================== -->
-    <section id="labels">
+      <section id="labels-badges">
         <div class="page-header">
-        <h1>Inline labels <small>Label and annotate text</small></h1>
+          <h1>Labels and badges</h1>
         </div>
+        <h3>Labels</h3>
         <table class="table table-bordered table-striped">
           <thead>
             <tr>
@@ -1556,21 +1557,8 @@
             </tr>
           </tbody>
         </table>
-    </section>
 
-
+        <h3>Badges</h3>
-
-    <!-- Badges
-    ================================================== -->
-    <section id="badges">
-      <div class="page-header">
-        <h1>Badges <small>Indicators and unread counts</small></h1>
-      </div>
-
-      <h3>About</h3>
-      <p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
-
-      <h3>Available classes</h3>
         <table class="table table-bordered table-striped">
           <thead>
             <tr>
@@ -1657,11 +1645,11 @@
       ================================================== -->
       <section id="typography">
         <div class="page-header">
-        <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
+          <h1>Typographic components</h1>
         </div>
 
         <h2>Hero unit</h2>
-      <p>A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
+        <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
         <div class="bs-docs-example">
           <div class="hero-unit">
             <h1>Hello, world!</h1>
@@ -1778,7 +1766,7 @@
         <h3>Uses grid column sizes</h3>
         <p>Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.</p>
 
-      <h2>The markup</h2>
+        <h2>Markup</h2>
         <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
@@ -1812,9 +1800,9 @@
               <img src="http://placehold.it/360x268" alt="">
             </a>
           </li>
-        <li class="span2">
+          <li class="span3">
             <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
+              <img src="http://placehold.it/260x120" alt="">
             </a>
           </li>
           <li class="span2">
@@ -1822,19 +1810,9 @@
               <img src="http://placehold.it/160x120" alt="">
             </a>
           </li>
-        <li class="span2">
+          <li class="span3">
             <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
+              <img src="http://placehold.it/260x120" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
             </a>
           </li>
           <li class="span2">

docs/download.html

@@ -66,8 +66,6 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
@@ -416,8 +414,6 @@
   </section><!-- /download -->
 </form>
 
-    </div>
-
 
 
    <!-- Footer

docs/examples.html

@@ -66,8 +66,6 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
@@ -100,8 +98,6 @@
   </li>
 </ul>
 
-    </div>
-
 
 
    <!-- Footer

docs/extend.html

@@ -66,15 +66,16 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>Extending Bootstrap</h1>
     <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
+  <div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav

docs/getting-started.html

@@ -66,15 +66,17 @@
       </div>
     </div>
 
-    <div class="container">
+</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
   <h1>Getting started</h1>
   <p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p>
+</div>
 </header>
 
+<div class="container">
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -211,8 +213,6 @@
 
   </div>
 </div>
-    </div>
-
 
 
    <!-- Footer

docs/index.html

@@ -66,16 +66,13 @@
       </div>
     </div>
 
-    <div class="container">
-
-</div>
-
 <div class="jumbotron masthead">
   <div class="container">
     <h1>Bootstrap</h1>
     <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
     <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p>
     <ul class="masthead-links">
+      <li><a href="./getting-started.html" >Getting started</a></li>
       <li><a href="./download.html" >Customize</a></li>
       <li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
       <li>Version 2.1.0</li>

docs/javascript.html

@@ -66,15 +66,16 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>Javascript for Bootstrap</h1>
-  <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
+    <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom jQuery plugins.
+  </div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav
@@ -348,7 +349,8 @@ $('#myModal').modal({
 <pre class="prettyprint linenums">
 $('#myModal').on('hidden', function () {
   // do something…
-})</pre>
+})
+</pre>
       </section>
 
 
@@ -695,7 +697,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   $(function () {
     $('#myTab a:last').tab('show');
   })
-&lt;/script&gt;</pre>
+&lt;/script&gt;
+</pre>
 
         <h3>Events</h3>
         <table class="table table-bordered table-striped">
@@ -720,7 +723,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
-})</pre>
+})
+</pre>
       </section>
 
 
@@ -1074,7 +1078,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 <pre class="prettyprint linenums">
 $('#my-alert').bind('closed', function () {
   // do something…
-})</pre>
+})
+</pre>
       </section>
 
 

docs/scaffolding.html

@@ -66,16 +66,18 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>Scaffolding</h1>
-  <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
+    <p class="lead">Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.</p>
+  </div>
 </header>
 
 
+<div class="container">
+
 
   <!-- Docs nav
   ================================================== -->
@@ -85,7 +87,6 @@
         <li><a href="#global">Global styles <i class="icon-chevron-right"></i></a></li>
         <li><a href="#gridSystem">Grid system <i class="icon-chevron-right"></i></a></li>
         <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#gridCustomization">Customizing <i class="icon-chevron-right"></i></a></li>
         <li><a href="#layouts">Layouts <i class="icon-chevron-right"></i></a></li>
         <li><a href="#responsive">Responsive design <i class="icon-chevron-right"></i></a></li>
       </ul>
@@ -101,7 +102,7 @@
           <h1>Global styles <small>for CSS reset, typography, and links</small></h1>
         </div>
 
-      <h2>Requires HTML5 doctype</h2>
+        <h3>Requires HTML5 doctype</h3>
         <p>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.</p>
 <pre class="prettyprint linenums">
 &lt;!DOCTYPE html&gt;
@@ -110,7 +111,7 @@
 &lt;/html&gt;
 </pre>
 
-      <h2>Typography and links</h2>
+        <h3>Typography and links</h3>
         <p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
         <ul>
           <li>Remove <code>margin</code> on the body</li>
@@ -120,7 +121,7 @@
         </ul>
         <p>These styles can be found within <strong>scaffolding.less</strong>.</p>
 
-      <h2>Reset via Normalize</h2>
+        <h3>Reset via Normalize</h3>
         <p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
 
       </section>
@@ -331,61 +332,6 @@
 
 
 
-    <!-- Customizaton
-    ================================================== -->
-    <section id="gridCustomization">
-      <div class="page-header">
-        <h1>Grid customization</h1>
-      </div>
-
-      <h2>Variables in LESS</h2>
-      <p>The default grid is built on a few variables for easy customization via LESS. All variables can be found in <strong>variables.less</strong>.</p>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th>Variable</th>
-            <th>Default value</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-            <td>Number of columns</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-            <td>Width of each column</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-            <td>Negative space between columns</td>
-          </tr>
-          <tr>
-            <td><code>@fluidGridColumnWidth</code></td>
-            <td>6.382978723%</td>
-            <td>Width of each fluid column</td>
-          </tr>
-          <tr>
-            <td><code>@fluidGridGutterWidth</code></td>
-            <td>2.127659574%</td>
-            <td>Negative space between fluid columns</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h3>How to customize</h3>
-      <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in <strong>variables.less</strong> and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in <strong>grid.less</strong>.</p>
-
-      <h2>Staying responsive</h2>
-      <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p>
-
-    </section>
-
-
 
       <!-- Layouts (Default and fluid)
       ================================================== -->

docs/templates/layout.mustache

@@ -78,12 +78,8 @@
       </div>
     </div>
 
-    <div class="container">
-
 {{>body}}
 
-    </div>{{! /container }}
-
 
 
    <!-- Footer

docs/templates/pages/base-css.mustache

@@ -1,10 +1,13 @@
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>{{_i}}Base CSS{{/i}}</h1>
-  <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
+    <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.{{/i}}</p>
+  </div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav
@@ -1608,3 +1611,5 @@
 
     </div>{{! /span9 }}
   </div>{{! row}}
+
+</div>{{! /container }}

docs/templates/pages/components.mustache

@@ -1,10 +1,13 @@
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>{{_i}}Components{{/i}}</h1>
-  <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
+    <p class="lead">{{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}</p>
+  </div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav
@@ -19,8 +22,7 @@
         <li><a href="#navbar">{{_i}}Navbar{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#pagination">{{_i}}Pagination{{/i}} <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#labels">{{_i}}Labels{{/i}} <i class="icon-chevron-right"></i></a></li>
+        <li><a href="#labels-badges">{{_i}}Labels and badges{{/i}} <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#badges">{{_i}}Badges{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#typography">{{_i}}Typography{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#alerts">{{_i}}Alerts{{/i}} <i class="icon-chevron-right"></i></a></li>
@@ -1422,12 +1424,13 @@
 
 
 
-    <!-- Labels
+      <!-- Labels and badges
       ================================================== -->
-    <section id="labels">
+      <section id="labels-badges">
         <div class="page-header">
-        <h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
+          <h1>{{_i}}Labels and badges{{/i}}</h1>
         </div>
+        <h3>{{_i}}Labels{{/i}}</h3>
         <table class="table table-bordered table-striped">
           <thead>
             <tr>
@@ -1486,21 +1489,8 @@
             </tr>
           </tbody>
         </table>
-    </section>
 
-
+        <h3>{{_i}}Badges{{/i}}</h3>
-
-    <!-- Badges
-    ================================================== -->
-    <section id="badges">
-      <div class="page-header">
-        <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
-      </div>
-
-      <h3>About</h3>
-      <p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
-
-      <h3>Available classes</h3>
         <table class="table table-bordered table-striped">
           <thead>
             <tr>
@@ -1587,11 +1577,11 @@
       ================================================== -->
       <section id="typography">
         <div class="page-header">
-        <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
+          <h1>{{_i}}Typographic components{{/i}}</h1>
         </div>
 
         <h2>{{_i}}Hero unit{{/i}}</h2>
-      <p>{{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
+        <p>{{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
         <div class="bs-docs-example">
           <div class="hero-unit">
             <h1>{{_i}}Hello, world!{{/i}}</h1>
@@ -1708,7 +1698,7 @@
         <h3>{{_i}}Uses grid column sizes{{/i}}</h3>
         <p>{{_i}}Lastly, the thumbnails component uses existing grid system classes&mdash;like <code>.span2</code> or <code>.span3</code>&mdash;for control of thumbnail dimensions.{{/i}}</p>
 
-      <h2>{{_i}}The markup{{/i}}</h2>
+        <h2>{{_i}}Markup{{/i}}</h2>
         <p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
@@ -1742,9 +1732,9 @@
               <img src="http://placehold.it/360x268" alt="">
             </a>
           </li>
-        <li class="span2">
+          <li class="span3">
             <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
+              <img src="http://placehold.it/260x120" alt="">
             </a>
           </li>
           <li class="span2">
@@ -1752,19 +1742,9 @@
               <img src="http://placehold.it/160x120" alt="">
             </a>
           </li>
-        <li class="span2">
+          <li class="span3">
             <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
+              <img src="http://placehold.it/260x120" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
-          </a>
-        </li>
-        <li class="span2">
-          <a href="#" class="thumbnail">
-            <img src="http://placehold.it/160x120" alt="">
             </a>
           </li>
           <li class="span2">
@@ -2125,3 +2105,5 @@ class="clearfix"
 
     </div>{{! /span9 }}
   </div>{{! row}}
+
+</div>{{! /container }}

docs/templates/pages/extend.mustache

@@ -1,10 +1,13 @@
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>{{_i}}Extending Bootstrap{{/i}}</h1>
     <p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
+  <div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav
@@ -101,3 +104,5 @@
 
     </div>{{! /span9 }}
   </div>{{! row}}
+
+</div>{{! /container }}

docs/templates/pages/getting-started.mustache

@@ -1,10 +1,14 @@
+</div>
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
   <h1>{{_i}}Getting started{{/i}}</h1>
   <p class="lead">{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}</p>
+</div>
 </header>
 
+<div class="container">
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">

docs/templates/pages/index.mustache

@@ -1,11 +1,10 @@
-</div>
-
 <div class="jumbotron masthead">
   <div class="container">
     <h1>Bootstrap</h1>
     <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
     <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
     <ul class="masthead-links">
+      <li><a href="./getting-started.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Getting started']);"{{/production}}>Getting started</a></li>
       <li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li>
       <li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
       <li>Version 2.1.0</li>
@@ -87,3 +86,5 @@
      </div>
 
   </div><!-- /.marketing -->
+
+</div>{{! /container }}

docs/templates/pages/javascript.mustache

@@ -1,10 +1,13 @@
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
-  <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
+    <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom jQuery plugins.{{/i}}
+  </div>
 </header>
 
+<div class="container">
 
 
   <!-- Docs nav
@@ -280,7 +283,8 @@ $('#myModal').modal({
 <pre class="prettyprint linenums">
 $('#myModal').on('hidden', function () {
   // {{_i}}do something…{{/i}}
-})</pre>
+})
+</pre>
       </section>
 
 
@@ -627,7 +631,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   $(function () {
     $('#myTab a:last').tab('show');
   })
-&lt;/script&gt;</pre>
+&lt;/script&gt;
+</pre>
 
         <h3>{{_i}}Events{{/i}}</h3>
         <table class="table table-bordered table-striped">
@@ -652,7 +657,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 $('a[data-toggle="tab"]').on('shown', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
-})</pre>
+})
+</pre>
       </section>
 
 
@@ -1006,7 +1012,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 <pre class="prettyprint linenums">
 $('#my-alert').bind('closed', function () {
   // {{_i}}do something…{{/i}}
-})</pre>
+})
+</pre>
       </section>
 
 
@@ -1519,3 +1526,5 @@ $('.carousel').carousel({
 
     </div>{{! /span9 }}
   </div>{{! row}}
+
+</div>{{! /container }}

docs/templates/pages/scaffolding.mustache

@@ -1,11 +1,15 @@
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
     <h1>{{_i}}Scaffolding{{/i}}</h1>
-  <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
+    <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.{{/i}}</p>
+  </div>
 </header>
 
 
+<div class="container">
+
 
   <!-- Docs nav
   ================================================== -->
@@ -15,7 +19,6 @@
         <li><a href="#global">{{_i}}Global styles{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#gridSystem">{{_i}}Grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#gridCustomization">{{_i}}Customizing{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#layouts">{{_i}}Layouts{{/i}} <i class="icon-chevron-right"></i></a></li>
         <li><a href="#responsive">{{_i}}Responsive design{{/i}} <i class="icon-chevron-right"></i></a></li>
       </ul>
@@ -31,7 +34,7 @@
           <h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
         </div>
 
-      <h2>{{_i}}Requires HTML5 doctype{{/i}}</h2>
+        <h3>{{_i}}Requires HTML5 doctype{{/i}}</h3>
         <p>{{_i}}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.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;!DOCTYPE html&gt;
@@ -40,7 +43,7 @@
 &lt;/html&gt;
 </pre>
 
-      <h2>{{_i}}Typography and links{{/i}}</h2>
+        <h3>{{_i}}Typography and links{{/i}}</h3>
         <p>{{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
         <ul>
           <li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
@@ -50,7 +53,7 @@
         </ul>
         <p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
 
-      <h2>{{_i}}Reset via Normalize{{/i}}</h2>
+        <h3>{{_i}}Reset via Normalize{{/i}}</h3>
         <p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
 
       </section>
@@ -261,61 +264,6 @@
 
 
 
-    <!-- Customizaton
-    ================================================== -->
-    <section id="gridCustomization">
-      <div class="page-header">
-        <h1>{{_i}}Grid customization{{/i}}</h1>
-      </div>
-
-      <h2>{{_i}}Variables in LESS{{/i}}</h2>
-      <p>{{_i}}The default grid is built on a few variables for easy customization via LESS. All variables can be found in <strong>variables.less</strong>.{{/i}}</p>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th>{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Default value{{/i}}</th>
-            <th>{{_i}}Description{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-            <td>{{_i}}Number of columns{{/i}}</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-            <td>{{_i}}Width of each column{{/i}}</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-            <td>{{_i}}Negative space between columns{{/i}}</td>
-          </tr>
-          <tr>
-            <td><code>@fluidGridColumnWidth</code></td>
-            <td>6.382978723%</td>
-            <td>{{_i}}Width of each fluid column{{/i}}</td>
-          </tr>
-          <tr>
-            <td><code>@fluidGridGutterWidth</code></td>
-            <td>2.127659574%</td>
-            <td>{{_i}}Negative space between fluid columns{{/i}}</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h3>{{_i}}How to customize{{/i}}</h3>
-      <p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in <strong>variables.less</strong> and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in <strong>grid.less</strong>.{{/i}}</p>
-
-      <h2>{{_i}}Staying responsive{{/i}}</h2>
-      <p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p>
-
-    </section>
-
-
 
       <!-- Layouts (Default and fluid)
       ================================================== -->
@@ -523,3 +471,5 @@
 
     </div>{{! /span9 }}
   </div>{{! row}}
+
+</div>{{! /container }}

docs/upgrading.html

@@ -66,8 +66,6 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
@@ -263,8 +261,6 @@
 </section>
 
 
-    </div>
-
 
 
    <!-- Footer