Merge branch '2.0.3-wip'

Conflicts:
	Makefile
	docs/assets/js/bootstrap.js
	docs/assets/js/bootstrap.min.js

8 files changed, 571 insertions, 241 deletions

diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 3434bdcbf..4fdaadb3b 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -20,6 +20,7 @@
 
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="assets/ico/favicon.ico">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
     <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
@@ -39,7 +40,7 @@
             <span class="icon-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="{{index}}">
                 <a href="./index.html">{{_i}}Overview{{/i}}</a>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 9b2964d74..3524ac985 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -294,7 +294,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
+      </p>
     </div>
   </div><!-- /row -->
 </section>
@@ -798,14 +805,12 @@
 
   <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
   <div class="row">
-    <div class="span3">
+    <div class="span6">
       <h3>{{_i}}Basic form{{/i}}</h3>
-      <p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
-    </div>
-    <div class="span9">
+      <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
       <form class="well">
         <label>{{_i}}Label name{{/i}}</label>
-        <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-inline">Associated help text!</span>
+        <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
         <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
         <label class="checkbox">
           <input type="checkbox"> {{_i}}Check me out{{/i}}
@@ -816,39 +821,30 @@
 &lt;form class="well"&gt;
   &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
   &lt;input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"&gt;
-  &lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
+  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
   &lt;label class="checkbox"&gt;
     &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
   &lt;/label&gt;
   &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span3">
-      <h3>{{_i}}Search form{{/i}}</h3>
-      <p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
-    </div>
-    <div class="span9">
-      <form class="well form-search">
-        <input type="text" class="input-medium search-query">
-        <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
-      </form>
+  </div>
+  <div class="span6">
+    <h3>{{_i}}Search form{{/i}}</h3>
+    <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
+    <form class="well form-search">
+      <input type="text" class="input-medium search-query">
+      <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+    </form>
 <pre class="prettyprint linenums">
 &lt;form class="well form-search"&gt;
   &lt;input type="text" class="input-medium search-query"&gt;
   &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span3">
+
       <h3>{{_i}}Inline form{{/i}}</h3>
-      <p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
-    </div>
-    <div class="span9">
+      <p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
       <form class="well form-inline">
         <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
         <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
@@ -867,17 +863,29 @@
   &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+    </div><!-- /.span -->
   </div><!-- /row -->
 
   <br>
 
   <h2>{{_i}}Horizontal forms{{/i}}</h2>
   <div class="row">
+    <div class="span4">
+      <p>{{_i}}{{/i}}</p>
+      <p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
+      <ul>
+        <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
+        <li>{{_i}}checkbox{{/i}}</li>
+        <li>{{_i}}radio{{/i}}</li>
+        <li>{{_i}}select{{/i}}</li>
+        <li>{{_i}}multiple select{{/i}}</li>
+        <li>{{_i}}file input{{/i}}</li>
+        <li>{{_i}}textarea{{/i}}</li>
+      </ul>
+    </div><!-- /.span -->
     <div class="span8">
       <form class="form-horizontal">
         <fieldset>
-          <legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
           <div class="control-group">
             <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
             <div class="controls">
@@ -953,31 +961,27 @@
 &lt;/form&gt;
 </pre>
     </div>
-    <div class="span4">
-      <h3>{{_i}}What's included{{/i}}</h3>
-      <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
-      <ul>
-        <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
-        <li>{{_i}}checkbox{{/i}}</li>
-        <li>{{_i}}radio{{/i}}</li>
-        <li>{{_i}}select{{/i}}</li>
-        <li>{{_i}}multiple select{{/i}}</li>
-        <li>{{_i}}file input{{/i}}</li>
-        <li>{{_i}}textarea{{/i}}</li>
-      </ul>
-      <hr>
-      <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
-      <p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
-    </div>
   </div>
 
   <br>
 
+  <h2>{{_i}}Form control states{{/i}}</h2>
   <div class="row">
+    <div class="span4">
+      <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Form validation{{/i}}</h3>
+      <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;fieldset
+  class="control-group error"&gt;
+  …
+&lt;/fieldset&gt;
+</pre>
+    </div>
     <div class="span8">
       <form class="form-horizontal">
         <fieldset>
-          <legend>{{_i}}Form control states{{/i}}</legend>
           <div class="control-group">
             <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
             <div class="controls">
@@ -1046,28 +1050,29 @@
         </fieldset>
       </form>
     </div>
-    <div class="span4">
-      <h3>{{_i}}Redesigned browser states{{/i}}</h3>
-      <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
-      <hr>
-      <h3>{{_i}}Form validation{{/i}}</h3>
-      <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
-<pre class="prettyprint linenums">
-&lt;fieldset
-  class="control-group error"&gt;
-  …
-&lt;/fieldset&gt;
-</pre>
-    </div>
   </div>
 
   <br>
 
+  <h2>{{_i}}Extending form controls{{/i}}</h2>
   <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
+      <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
+      <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
+      <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
+      <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Form help text{{/i}}</h4>
+      <p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
+    </div>
     <div class="span8">
       <form class="form-horizontal">
         <fieldset>
-          <legend>{{_i}}Extending form controls{{/i}}</legend>
           <div class="control-group">
             <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
             <div class="controls docs-input-sizes">
@@ -1134,10 +1139,18 @@
             </div>
           </div>
           <div class="control-group">
-            <label class="control-label" for="appendedPrependedInput">{{_i}}Append with button{{/i}}</label>
+            <label class="control-label" for="appendedInputButton">{{_i}}Append with button{{/i}}</label>
+            <div class="controls">
+              <div class="input-append">
+                <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+              </div>
+            </div>
+          </div>
+          <div class="control-group">
+            <label class="control-label" for="appendedInputButtons">{{_i}}Two-button append{{/i}}</label>
             <div class="controls">
               <div class="input-append">
-                <input class="span2" id="appendedPrependedInput" size="16" type="text"><button class="btn" type="button">Go!</button>
+                <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
               </div>
             </div>
           </div>
@@ -1193,20 +1206,6 @@
         </fieldset>
       </form>
     </div>
-    <div class="span4">
-      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
-      <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
-      <hr>
-      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
-      <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
-      <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
-      <hr>
-      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
-      <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
-      <hr>
-      <h4>{{_i}}Form help text{{/i}}</h4>
-      <p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
-    </div>
   </div><!-- /row -->
 </section>
 
@@ -1240,7 +1239,7 @@
       <tr>
         <td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td>
         <td><code>btn btn-info</code></td>
-        <td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
+        <td>{{_i}}Used as an alternative to the default styles{{/i}}</td>
       </tr>
       <tr>
         <td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td>
@@ -1369,15 +1368,15 @@
         <li><i class="icon-inbox"></i> icon-inbox</li>
         <li><i class="icon-play-circle"></i> icon-play-circle</li>
         <li><i class="icon-repeat"></i> icon-repeat</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
         <li><i class="icon-refresh"></i> icon-refresh</li>
         <li><i class="icon-list-alt"></i> icon-list-alt</li>
         <li><i class="icon-lock"></i> icon-lock</li>
         <li><i class="icon-flag"></i> icon-flag</li>
         <li><i class="icon-headphones"></i> icon-headphones</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
         <li><i class="icon-volume-off"></i> icon-volume-off</li>
         <li><i class="icon-volume-down"></i> icon-volume-down</li>
         <li><i class="icon-volume-up"></i> icon-volume-up</li>
@@ -1403,10 +1402,6 @@
         <li><i class="icon-indent-right"></i> icon-indent-right</li>
         <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
         <li><i class="icon-picture"></i> icon-picture</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
         <li><i class="icon-pencil"></i> icon-pencil</li>
         <li><i class="icon-map-marker"></i> icon-map-marker</li>
         <li><i class="icon-adjust"></i> icon-adjust</li>
@@ -1417,6 +1412,10 @@
         <li><i class="icon-move"></i> icon-move</li>
         <li><i class="icon-step-backward"></i> icon-step-backward</li>
         <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
         <li><i class="icon-backward"></i> icon-backward</li>
         <li><i class="icon-play"></i> icon-play</li>
         <li><i class="icon-pause"></i> icon-pause</li>
@@ -1437,10 +1436,6 @@
         <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
         <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
         <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
-      </ul>
-    </div>
-    <div class="span3">
-      <ul class="the-icons">
         <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
         <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
         <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
@@ -1456,6 +1451,10 @@
         <li><i class="icon-leaf"></i> icon-leaf</li>
         <li><i class="icon-fire"></i> icon-fire</li>
         <li><i class="icon-eye-open"></i> icon-eye-open</li>
+      </ul>
+    </div>
+    <div class="span3">
+      <ul class="the-icons">
         <li><i class="icon-eye-close"></i> icon-eye-close</li>
         <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
         <li><i class="icon-plane"></i> icon-plane</li>
@@ -1471,6 +1470,26 @@
         <li><i class="icon-folder-open"></i> icon-folder-open</li>
         <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
         <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
+        <li><i class="icon-hdd"></i> icon-hdd</li>
+        <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
+        <li><i class="icon-bell"></i> icon-bell</li>
+        <li><i class="icon-certificate"></i> icon-certificate</li>
+        <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
+        <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
+        <li><i class="icon-hand-right"></i> icon-hand-right</li>
+        <li><i class="icon-hand-left"></i> icon-hand-left</li>
+        <li><i class="icon-hand-up"></i> icon-hand-up</li>
+        <li><i class="icon-hand-down"></i> icon-hand-down</li>
+        <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
+        <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
+        <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
+        <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
+        <li><i class="icon-globe"></i> icon-globe</li>
+        <li><i class="icon-wrench"></i> icon-wrench</li>
+        <li><i class="icon-tasks"></i> icon-tasks</li>
+        <li><i class="icon-filter"></i> icon-filter</li>
+        <li><i class="icon-briefcase"></i> icon-briefcase</li>
+        <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
       </ul>
     </div>
   </div>
@@ -1563,8 +1582,7 @@
           <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
           <div class="controls">
             <div class="input-prepend">
-              <span class="add-on"><i class="icon-envelope"></i></span>
-              <input class="span2" id="inputIcon" type="text">
+              <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
             </div>
           </div>
         </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 1a7f5b91a..8e81a95df 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -345,7 +345,7 @@
         </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
       <h3>{{_i}}Sizes{{/i}}</h3>
-      <p>{{_i}}Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
+      <p>{{_i}}Utilize the extra button classes <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
       <div class="btn-toolbar">
         <div class="btn-group">
           <button class="btn btn-large">{{_i}}Large action{{/i}}</button>
@@ -563,16 +563,6 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">{{_i}}Action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-            <li class="divider"></li>
-            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-          </ul>
-        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
@@ -605,16 +595,6 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
-          <ul class="dropdown-menu bottom-up pull-right">
-            <li><a href="#">{{_i}}Action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-            <li class="divider"></li>
-            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-          </ul>
-        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
@@ -722,54 +702,58 @@
       <h3>{{_i}}What's included{{/i}}</h3>
       <p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
       <p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Fade in tabs{{/i}}</h4>
+      <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
+      <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
+      <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
     </div>
-    <div class="span4">
+    <div class="span8">
       <h3>{{_i}}Tabbable example{{/i}}</h3>
-      <p>{{_i}}To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.{{/i}}</p>
-      <div class="tabbable" style="margin-bottom: 9px;">
+      <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
+      <div class="tabbable" style="margin-bottom: 18px;">
         <ul class="nav nav-tabs">
-          <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-          <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-          <li><a href="#3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+          <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+          <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+          <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
         </ul>
-        <div class="tab-content">
-          <div class="tab-pane active" id="1">
+        <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+          <div class="tab-pane active" id="tab1">
             <p>{{_i}}I'm in Section 1.{{/i}}</p>
           </div>
-          <div class="tab-pane" id="2">
+          <div class="tab-pane" id="tab2">
             <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
           </div>
-          <div class="tab-pane" id="3">
+          <div class="tab-pane" id="tab3">
             <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
           </div>
         </div>
       </div> <!-- /tabbable -->
-    </div>
-    <div class="span4">
-      <h3>{{_i}}Custom jQuery plugin{{/i}}</h3>
-      <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}</p>
-      <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-    </div>
-  </div>
+      <p>{{_i}}For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.{{/i}}</p>
 
-  <h3>{{_i}}Straightforward markup{{/i}}</h3>
-  <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
+      <h3>{{_i}}Straightforward markup{{/i}}</h3>
+      <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt;
+&lt;div class="tabbable"&gt; &lt;-- Only required for left/right tabs --&gt;
   &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="1"&gt;
+    &lt;div class="tab-pane active" id="tab1"&gt;
       &lt;p&gt;{{_i}}I'm in Section 1.{{/i}}&lt;/p&gt;
     &lt;/div&gt;
-    &lt;div class="tab-pane" id="2"&gt;
+    &lt;div class="tab-pane" id="tab2"&gt;
       &lt;p&gt;{{_i}}Howdy, I'm in Section 2.{{/i}}&lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
+    </div>
+  </div>
+
 
   <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
   <div class="row">
@@ -964,7 +948,7 @@
 </pre>
         </div><!--/span-->
       </div><!--/row-->
-      <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
+      <p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
       <h3>{{_i}}Brand name{{/i}}</h3>
       <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -979,7 +963,7 @@
   &lt;input type="text" class="span2"&gt;
 &lt;/form&gt;
 </pre>
-      <p>{{_i}}For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.{{/i}}</p>
+      <p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
   &lt;input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"&gt;
@@ -1012,7 +996,7 @@
 &lt;/div&gt;
 </pre>
       <div class="alert alert-info">
-        <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
+        <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
       </div>
 
     </div><!-- /.span -->
@@ -1039,7 +1023,7 @@
       <h3>{{_i}}Component alignment{{/i}}</h3>
       <p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
       <h3>{{_i}}Adding dropdown menus{{/i}}</h3>
-      <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.{{/i}}</p>
+      <p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="dropdown"&gt;
@@ -1058,7 +1042,7 @@
       <p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
       <hr>
       <h3>{{_i}}Text in the navbar{{/i}}</h3>
-      <p>{{_i}}Wrap strings of text in a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
+      <p>{{_i}}Wrap strings of text in a <code>&lt;.navbar-text&gt;</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.{{/i}}</p>
     </div><!-- /.span -->
   </div><!-- /.row -->
 
@@ -1155,11 +1139,11 @@
       </div>
       <div class="pagination">
         <ul>
-          <li><a href="#">&larr;</a></li>
+          <li><a href="#">&laquo;</a></li>
           <li class="active"><a href="#">10</a></li>
           <li class="disabled"><a href="#">...</a></li>
           <li><a href="#">20</a></li>
-          <li><a href="#">&rarr;</a></li>
+          <li><a href="#">&raquo;</a></li>
         </ul>
       </div>
       <div class="pagination pagination-centered">
@@ -1366,13 +1350,13 @@
           </tr>
           <tr>
             <td>
-              {{_i}}Error{{/i}}
+              {{_i}}Important{{/i}}
             </td>
             <td>
-              <span class="badge badge-error">6</span>
+              <span class="badge badge-important">6</span>
             </td>
             <td>
-              <code>&lt;span class="badge badge-error"&gt;6&lt;/span&gt;</code>
+              <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
             </td>
           </tr>
           <tr>
@@ -1440,7 +1424,7 @@
   <h2>{{_i}}Page header{{/i}}</h2>
   <div class="row">
     <div class="span4">
-      <p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
+      <p>{{_i}}A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
     </div>
     <div class="span8">
       <div class="page-header">
@@ -1627,24 +1611,25 @@
       <h3>{{_i}}Example alerts{{/i}}</h3>
       <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
       <div class="alert">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
   &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
 &lt;/div&gt;
 </pre>
+      <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code>button</code> element with the data attribute, which we have opted to do for our docs.{{/i}}</p>
       <p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
       <div class="alert alert-block">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
         <p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert alert-block"&gt;
-  &lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
+  &lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;
   &lt;h4 class="alert-heading"&gt;{{_i}}Warning!{{/i}}&lt;/h4&gt;
   {{_i}}Best check yo self, you're not...{{/i}}
 &lt;/div&gt;
@@ -1657,7 +1642,7 @@
     <div class="span4">
       <h3>{{_i}}Error or danger{{/i}}</h3>
       <div class="alert alert-error">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1669,7 +1654,7 @@
     <div class="span4">
       <h3>{{_i}}Success{{/i}}</h3>
       <div class="alert alert-success">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1681,7 +1666,7 @@
     <div class="span4">
       <h3>{{_i}}Information{{/i}}</h3>
       <div class="alert alert-info">
-        <a class="close" data-dismiss="alert">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1821,8 +1806,10 @@
     <div class="span4">
       <h2>{{_i}}Close icon{{/i}}</h2>
       <p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
-      <p><a class="close" style="float: none;">&times;</a></p>
-<pre class="prettyprint linenums">&lt;a class="close"&gt;&amp;times;&lt;/a&gt;</pre>
+      <p><button class="close" style="float: none;">&times;</button></p>
+<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
+      <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p>
+<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>
     </div><!--/span-->
   </div><!--/row-->
 </section>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 87fdc6a38..ffade0977 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -31,8 +31,7 @@
       <h3>{{_i}}Base CSS{{/i}}</h3>
       <label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> {{_i}}Labels and badges{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
@@ -67,7 +66,11 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> {{_i}}Responsive navbar{{/i}}</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
@@ -200,14 +203,20 @@
       <input type="text" class="span3" placeholder="2.127659574%">
 
       <h3>{{_i}}Typography{{/i}}</h3>
+      <label>@sansFontFamily</label>
+      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <label>@serifFontFamily</label>
+      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
+      <label>@monoFontFamily</label>
+      <input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
       <label>@baseFontSize</label>
       <input type="text" class="span3" placeholder="13px">
       <label>@baseFontFamily</label>
-      <input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
+      <input type="text" class="span3" placeholder="@sansFontFamily">
       <label>@baseLineHeight</label>
       <input type="text" class="span3" placeholder="18px">
       <label>@altFontFamily</label>
-      <input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif;">
+      <input type="text" class="span3" placeholder="@serifFontFamily">
       <label>@headingsFontFamily</label>
       <input type="text" class="span3" placeholder="inherit">
       <label>@headingsFontWeight</label>
@@ -241,6 +250,8 @@
       <input type="text" class="span3" placeholder="@grayDark">
       <label>@navbarText</label>
       <input type="text" class="span3" placeholder="@grayLight">
+      <label>@navbarBrandColor</label>
+      <input type="text" class="span3" placeholder="@navbarLinkColor">
       <label>@navbarLinkColor</label>
       <input type="text" class="span3" placeholder="@grayLight">
       <label>@navbarLinkColorHover</label>
@@ -280,8 +291,12 @@
       <input type="text" class="span3" placeholder="@white">
       <label>@inputBorder</label>
       <input type="text" class="span3" placeholder="#ccc">
+      <label>@inputBorderRadius</label>
+      <input type="text" class="span3" placeholder="3px">
       <label>@inputDisabledBackground</label>
       <input type="text" class="span3" placeholder="@grayLighter">
+      <label>@formActionsBackground</label>
+      <input type="text" class="span3" placeholder="#f5f5f5">
 
       <label>@btnPrimaryBackground</label>
       <input type="text" class="span3" placeholder="@linkColor">
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 9d8253df1..41a89e07a 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -6,7 +6,7 @@
     <p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
     <p class="download-info">
       <a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
-      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.2)</small>{{/i}}</a>
+      <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap <small>(v2.0.3)</small>{{/i}}</a>
     </p>
   </div>
 
@@ -14,6 +14,7 @@
     <ul class="quick-links">
       <li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
       <li><a href="https://github.com/twitter/bootstrap/zipball/master">{{_i}}Download with docs{{/i}}</a></li>
+      <li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li>
       <li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li>
       <li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
     </ul>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 7fd4c98d0..1ae3ffa5a 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -129,9 +129,9 @@
           <h2>{{_i}}Static example{{/i}}</h2>
           <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
           <div class="well modal-example" style="background-color: #888; border: none;">
-            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
+            <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1; max-width: 100%;">
               <div class="modal-header">
-                <a href="#" class="close" data-dismiss="modal">&times;</a>
+                <button class="close" data-dismiss="modal">&times;</button>
                 <h3>{{_i}}Modal header{{/i}}</h3>
               </div>
               <div class="modal-body">
@@ -149,7 +149,7 @@
           <!-- sample modal content -->
           <div id="myModal" class="modal hide fade">
             <div class="modal-header">
-              <a class="close" data-dismiss="modal" >&times;</a>
+              <button class="close" data-dismiss="modal">&times;</button>
               <h3>{{_i}}Modal Heading{{/i}}</h3>
             </div>
             <div class="modal-body">
@@ -226,7 +226,7 @@
 <pre class="prettyprint linenums">
 &lt;div class="modal" id="myModal"&gt;
   &lt;div class="modal-header"&gt;
-    &lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
+    &lt;button class="close" data-dismiss="modal"&gt;&times;&lt;/button&gt;
     &lt;h3&gt;Modal header&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div class="modal-body"&gt;
@@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () {
   &lt;/li&gt;
   ...
 &lt;/ul&gt;</pre>
+          <p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+      {{_i}}Dropdown{{/i}}
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().dropdown()</h4>
           <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
@@ -494,6 +508,14 @@ $('#myModal').on('hidden', function () {
             <strong>{{_i}}Heads up!{{/i}}</strong>
             {{_i}}Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.{{/i}}
           </div>
+          <h3>{{_i}}Methods{{/i}}</h3>
+          <h4>.scrollspy('refresh')</h4>
+          <p>{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+$('[data-spy="scroll"]').each(function () {
+  var $spy = $(this).scrollspy('refresh')
+});
+</pre>
           <h3>{{_i}}Options{{/i}}</h3>
           <table class="table table-bordered table-striped">
             <thead>
@@ -513,6 +535,21 @@ $('#myModal').on('hidden', function () {
              </tr>
             </tbody>
           </table>
+           <h3>{{_i}}Events{{/i}}</h3>
+          <table class="table table-bordered table-striped">
+            <thead>
+             <tr>
+               <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+               <th>{{_i}}Description{{/i}}</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>{{_i}}activate{{/i}}</td>
+               <td>{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}</td>
+            </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </section>
@@ -533,7 +570,7 @@ $('#myModal').on('hidden', function () {
         <div class="span9 columns">
           <h2>{{_i}}Example tabs{{/i}}</h2>
           <p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
-          <ul id="tab" class="nav nav-tabs">
+          <ul id="myTab" class="nav nav-tabs">
             <li class="active"><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
             <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
             <li class="dropdown">
@@ -560,10 +597,21 @@ $('#myModal').on('hidden', function () {
           </div>
           <hr>
           <h2>{{_i}}Using bootstrap-tab.js{{/i}}</h2>
-          <p>{{_i}}Enable tabbable tabs via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$('#myTab').tab('show')</pre>
+          <p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
+          <pre class="prettyprint linenums">
+$('#myTab a').click(function (e) {
+  e.preventDefault();
+  $(this).tab('show');
+})</pre>
+          <p>{{_i}}You can activate individual tabs in several ways:{{/i}}</p>
+<pre class="prettyprint linenums">
+$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
+$('#myTab a:first').tab('show'); // Select first tab
+$('#myTab a:last').tab('show'); // Select last tab
+$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+</pre>
           <h3>{{_i}}Markup{{/i}}</h3>
-          <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
+          <p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the bootstrap tab styling.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
   &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -574,10 +622,10 @@ $('#myModal').on('hidden', function () {
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tab</h4>
           <p>
-            {{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
+            {{_i}}Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.{{/i}}
           </p>
 <pre class="prettyprint linenums">
-&lt;ul class="nav nav-tabs"&gt;
+&lt;ul class="nav nav-tabs" id="myTab"&gt;
   &lt;li class="active"&gt;&lt;a href="#home"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#profile"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#messages"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
@@ -593,7 +641,7 @@ $('#myModal').on('hidden', function () {
 
 &lt;script&gt;
   $(function () {
-    $('.tabs a:last').tab('show')
+    $('#myTab a:last').tab('show');
   })
 &lt;/script&gt;</pre>
           <h3>{{_i}}Events{{/i}}</h3>
@@ -642,7 +690,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h2>{{_i}}Example use of Tooltips{{/i}}</h2>
           <p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
           <div class="tooltip-demo well">
-            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
+            <p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
             </p>
           </div>
           <hr>
@@ -695,7 +743,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>{{_i}}number | object{{/i}}</td>
                <td>0</td>
                <td>
-                <p>{{_i}}delay showing and hiding the tooltip (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}</p>
                 <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
@@ -804,7 +852,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>{{_i}}number | object{{/i}}</td>
                <td>0</td>
                <td>
-                <p>{{_i}}delay showing and hiding the popover (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
                 <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
@@ -817,7 +865,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           </div>
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>
-          {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.{{/i}}
+          {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
           </p>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().popover({{_i}}options{{/i}})</h4>
@@ -853,11 +901,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <h2>{{_i}}Example alerts{{/i}}</h2>
           <p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
           <div class="alert fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <button class="close" data-dismiss="alert">&times;</button>
             <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
           </div>
           <div class="alert alert-block alert-error fade in">
-            <a class="close" data-dismiss="alert" href="#">&times;</a>
+            <button class="close" data-dismiss="alert">&times;</button>
             <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
             <p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
             <p>
@@ -963,7 +1011,7 @@ $('#my-alert').bind('closed', function () {
           <hr>
           <h2>{{_i}}Using bootstrap-button.js{{/i}}</h2>
           <p>{{_i}}Enable buttons via javascript:{{/i}}</p>
-          <pre class="prettyprint linenums">$('.tabs').button()</pre>
+          <pre class="prettyprint linenums">$('.nav-tabs').button()</pre>
             <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -1025,7 +1073,8 @@ $('#my-alert').bind('closed', function () {
           <h3>{{_i}}About{{/i}}</h3>
           <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
           <a href="assets/js/bootstrap-collapse.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
-        </div>
+          <p class="muted"><strong>*</strong> {{_i}}Requires the Transitions plugin to be included.{{/i}}</p>
+       </div>
         <div class="span9 columns">
           <h2>{{_i}}Example accordion{{/i}}</h2>
           <p>{{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}</p>
@@ -1232,7 +1281,7 @@ $('#myCollapsible').on('hidden', function () {
                <td>{{_i}}interval{{/i}}</td>
                <td>{{_i}}number{{/i}}</td>
                <td>5000</td>
-               <td>{{_i}}The amount of time to delay between automatically cycling an item.{{/i}}</td>
+               <td>{{_i}}The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.{{/i}}</td>
              </tr>
              <tr>
                <td>{{_i}}pause{{/i}}</td>
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 23a4486a1..7698dd290 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -63,12 +63,24 @@
 
   <div class="row">
     <div class="span6">
-      <h3>{{_i}}Hyperlinks{{/i}}</h3>
+      <h3>{{_i}}Scaffolding and links{{/i}}</h3>
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span2"><code>@linkColor</code></td>
-            <td>#08c</td>
+            <td class="span2"><code>@bodyBackground</code></td>
+            <td><code>@white</code></td>
+            <td>{{_i}}Page background color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@textColor</code></td>
+            <td><code>@grayDark</code></td>
+            <td>{{_i}}Default text color for entire body, headings, and more{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@linkColor</code></td>
+            <td><code>#08c</code></td>
             <td>{{_i}}Default link text color{{/i}}</td>
             <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
@@ -109,16 +121,69 @@
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
+            <td class="span2"><code>@sansFontFamily</code></td>
+            <td colspan="2">"Helvetica Neue", Helvetica, Arial, sans-serif</td>
+          </tr>
+          <tr>
+            <td><code>@serifFontFamily</code></td>
+            <td colspan="2"><code>Georgia, "Times New Roman", Times, serif</code></td>
+          </tr>
+          <tr>
+            <td><code>@monoFontFamily</code></td>
+            <td colspan="2">Menlo, Monaco, "Courier New", monospace</td>
+          </tr>
+
+          <tr>
             <td class="span2"><code>@baseFontSize</code></td>
             <td>13px</td>
+            <td><em class="muted">Must be pixels</em></td>
           </tr>
           <tr>
             <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td colspan="2"><code>@sansFontFamily</code></td>
           </tr>
           <tr>
             <td><code>@baseLineHeight</code></td>
             <td>18px</td>
+            <td><em class="muted">Must be pixels</em></td>
+          </tr>
+          <tr>
+            <td><code>@altFontFamily</code></td>
+            <td colspan="2"><code>@serifFontFamily</code></td>
+          </tr>
+
+          <tr>
+            <td class="span2"><code>@headingsFontFamily</code></td>
+            <td colspan="2"><code>inherit</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsFontWeight</code></td>
+            <td colspan="2"><code>bold</code></td>
+          </tr>
+          <tr>
+            <td><code>@headingsColor</code></td>
+            <td colspan="2"><code>inherit</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Tables{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@tableBackground</code></td>
+            <td><code>transparent</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundAccent</code></td>
+            <td><code>#f9f9f9</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBackgroundHover</code></td>
+            <td><code>#f5f5f5</code></td>
+          </tr>
+          <tr>
+            <td><code>@tableBorder</code></td>
+            <td><code>ddd</code></td>
           </tr>
         </tbody>
       </table>
@@ -214,10 +279,86 @@
       <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td class="span3"><code>@primaryButtonBackground</code></td>
+            <td class="span3"><code>@btnBackground</code></td>
+            <td><code>@white</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnBackgroundHighlight</code></td>
+            <td><code>darken(@white, 10%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #e6e6e6;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnBorder</code></td>
+            <td><code>darken(@white, 20%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnPrimaryBackground</code></td>
             <td><code>@linkColor</code></td>
             <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
+          <tr>
+            <td class="span3"><code>@btnPrimaryBackgroundHighlight</code></td>
+            <td><code>spin(@btnPrimaryBackground, 15%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #05c;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnInfoBackground</code></td>
+            <td><code>#5bc0de</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #5bc0de;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnInfoBackgroundHighlight</code></td>
+            <td><code>#2f96b4</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #2f96b4;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnSuccessBackground</code></td>
+            <td><code>#62c462</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #62c462;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnSuccessBackgroundHighlight</code></td>
+            <td><code>51a351</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #51a351;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnWarningBackground</code></td>
+            <td><code>lighten(@orange, 15%)</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #fbb450;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnWarningBackgroundHighlight</code></td>
+            <td><code>@orange</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f89406;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnDangerBackground</code></td>
+            <td><code>#ee5f5b</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #ee5f5b;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnDangerBackgroundHighlight</code></td>
+            <td><code>#bd362f</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #bd362f;"></span></td>
+          </tr>
+
+          <tr>
+            <td class="span3"><code>@btnInverseBackground</code></td>
+            <td><code>@gray</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #555;"></span></td>
+          </tr>
+          <tr>
+            <td class="span3"><code>@btnInverseBackgroundHighlight</code></td>
+            <td><code>@grayDarker</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
         </tbody>
       </table>
       <h4>{{_i}}Forms{{/i}}</h4>
@@ -226,47 +367,29 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
-            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
-          </tr>
-        </tbody>
-      </table>
-      <h4>{{_i}}Navbar{{/i}}</h4>
-      <table class="table table-bordered table-striped">
-        <tbody>
-          <tr>
-            <td class="span3"><code>@navbarHeight</code></td>
-            <td>40px</td>
-            <td class="swatch-col"></td>
           </tr>
           <tr>
-            <td><code>@navbarBackground</code></td>
-            <td><code>@grayDarker</code></td>
-            <td><span class="swatch" style="background-color: #222;"></span></td>
+            <td><code>@inputBackground</code></td>
+            <td><code>@white</code></td>
           </tr>
           <tr>
-            <td><code>@navbarBackgroundHighlight</code></td>
-            <td><code>@grayDark</code></td>
-            <td><span class="swatch" style="background-color: #333;"></span></td>
+            <td><code>@inputBorder</code></td>
+            <td><code>#ccc</code></td>
           </tr>
           <tr>
-            <td><code>@navbarText</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
+            <td><code>@inputBorderRadius</code></td>
+            <td><code>3px</code></td>
           </tr>
           <tr>
-            <td><code>@navbarLinkColor</code></td>
-            <td><code>@grayLight</code></td>
-            <td><span class="swatch" style="background-color: #999;"></span></td>
+            <td><code>@inputDisabledBackground</code></td>
+            <td><code>@grayLighter</code></td>
           </tr>
           <tr>
-            <td><code>@navbarLinkColorHover</code></td>
-            <td><code>@white</code></td>
-            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+            <td><code>@formActionsBackground</code></td>
+            <td><code>#f5f5f5</code></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h4>{{_i}}Form states and alerts{{/i}}</h4>
       <table class="table table-bordered table-striped">
         <tbody>
@@ -313,6 +436,130 @@
         </tbody>
       </table>
     </div>
+    <div class="span6">
+      <h4>{{_i}}Navbar{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@navbarHeight</code></td>
+            <td>40px</td>
+            <td class="swatch-col"></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackground</code></td>
+            <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBackgroundHighlight</code></td>
+            <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarText</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColor</code></td>
+            <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkColorActive</code></td>
+            <td><code>@navbarLinkColorHover</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundHover</code></td>
+            <td><code>transparent</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: transparent;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarLinkBackgroundActive</code></td>
+            <td><code>@navbarBackground</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+
+          <tr>
+            <td><code>@navbarSearchBackground</code></td>
+            <td><code>lighten(@navbarBackground, 25%)</code></td>
+            <td><span class="swatch" style="background-color: #666;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBackgroundFocus</code></td>
+            <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchBorder</code></td>
+            <td><code>darken(@navbarSearchBackground, 30%)</code></td>
+            <td><span class="swatch" style="background-color: #111;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarSearchPlaceholderColor</code></td>
+            <td><code>#ccc</code></td>
+            <td><span class="swatch" style="background-color: #ccc;"></span></td>
+          </tr>
+          <tr>
+            <td><code>@navbarBrandColor</code></td>
+            <td><code>@navbarLinkColor</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Dropdowns{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@dropdownBackground</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownBorder</code></td>
+            <td><code>rgba(0,0,0,.2)</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColor</code></td>
+            <td><code>@grayDark</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkColorHover</code></td>
+            <td><code>@white</code></td>
+          </tr>
+          <tr>
+            <td><code>@dropdownLinkBackgroundHover</code></td>
+            <td><code>@linkColor</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h4>{{_i}}Hero unit{{/i}}</h4>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span3"><code>@heroUnitBackground</code></td>
+            <td><code>@grayLighter</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #eee;"></span></td>
+          </tr>
+          <tr>
+            <td class="span2"><code>@heroUnitHeadingColor</code></td>
+            <td><code>inherit</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@heroUnitLeadColor</code></td>
+            <td><code>inhereit</code></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div><!-- /row -->
 
 </section>
@@ -384,17 +631,17 @@
       </tr>
       <tr>
         <td><code>.size()</code></td>
-        <td><code>@height: 5px, @width: 5px</code></td>
+        <td><code>@height @width</code></td>
         <td>{{_i}}Quickly set the height and width on one line{{/i}}</td>
       </tr>
       <tr>
         <td><code>.square()</code></td>
-        <td><code>@size: 5px</code></td>
+        <td><code>@size</code></td>
         <td>{{_i}}Builds on <code>.size()</code> to set the width and height as same value{{/i}}</td>
       </tr>
       <tr>
         <td><code>.opacity()</code></td>
-        <td><code>@opacity: 100</code></td>
+        <td><code>@opacity</code></td>
         <td>{{_i}}Set, in whole numbers, the opacity percentage (e.g., "50" or "75"){{/i}}</td>
       </tr>
     </tbody>
@@ -488,6 +735,16 @@
         <td><code>@fluidGridColumnWidth, @fluidGridGutterWidth</code></td>
         <td>{{_i}}Generate a precent grid system with <em>n</em> columns and <em>x</em> % wide gutter{{/i}}</td>
       </tr>
+      <tr>
+        <td><code>#grid > .input()</code></td>
+        <td><code>@gridColumnWidth, @gridGutterWidth</code></td>
+        <td>{{_i}}Generate the pixel grid system for <code>input</code> elements, accounting for padding and borders{{/i}}</td>
+      </tr>
+      <tr>
+        <td><code>.makeColumn</code></td>
+        <td><code>@columns: 1, @offset: 0</code></td>
+        <td>{{_i}}Turn any <code>div</code> into a grid column without the <code>.span*</code> classes{{/i}}</td>
+      </tr>
     </tbody>
   </table>
   <h3>{{_i}}CSS3 properties{{/i}}</h3>
@@ -502,12 +759,12 @@
     <tbody>
       <tr>
         <td><code>.border-radius()</code></td>
-        <td><code>@radius: 5px</code></td>
+        <td><code>@radius</code></td>
         <td>{{_i}}Round the corners of an element. Can be a single value or four space-separated values{{/i}}</td>
       </tr>
       <tr>
         <td><code>.box-shadow()</code></td>
-        <td><code>@shadow: 0 1px 3px rgba(0,0,0,.25)</code></td>
+        <td><code>@shadow</code></td>
         <td>{{_i}}Add a drop shadow to an element{{/i}}</td>
       </tr>
       <tr>
@@ -527,7 +784,7 @@
       </tr>
       <tr>
         <td><code>.translate()</code></td>
-        <td><code>@x: 0, @y: 0</code></td>
+        <td><code>@x, @y</code></td>
         <td>{{_i}}Move an element on the x and y planes{{/i}}</td>
       </tr>
       <tr>
@@ -551,13 +808,18 @@
         <td>{{_i}}Control cursor selection of text on a page{{/i}}</td>
       </tr>
       <tr>
+        <td><code>.backface-visibility()</code></td>
+        <td><code>@visibility: visible</code></td>
+        <td>{{_i}}Prevent flickering of content when using CSS 3D transforms{{/i}}</td>
+      </tr>
+      <tr>
         <td><code>.resizable()</code></td>
         <td><code>@direction: both</code></td>
         <td>{{_i}}Make any element resizable on the right and bottom{{/i}}</td>
       </tr>
       <tr>
         <td><code>.content-columns()</code></td>
-        <td><code>@columnCount, @columnGap: @gridColumnGutter</code></td>
+        <td><code>@columnCount, @columnGap: @gridGutterWidth</code></td>
         <td>{{_i}}Make the content of any element use CSS3 columns{{/i}}</td>
       </tr>
     </tbody>
@@ -644,7 +906,7 @@
     <div class="span4">
       <h3>{{_i}}Command line{{/i}}</h3>
       <p>{{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}</p>
-        <pre>$ lessc ./lib/bootstrap.less > bootstrap.css</pre>
+        <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
       <p>{{_i}}Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!{{/i}}</p>
     </div><!-- /span4 -->
     <div class="span4">
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 97131fdf2..13c777a26 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -96,7 +96,7 @@
   <div class="row">
     <div class="span4">
       <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
-      <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}</p>
+      <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, tablet landscape and small desktops, and large widescreen desktops.{{/i}}</p>
     </div><!-- /.span -->
     <div class="span4">
 <pre class="prettyprint linenums">
@@ -107,7 +107,7 @@
 </pre>
     </div><!-- /.span -->
     <div class="span4">
-      <p>{{_i}}As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
+      <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
     </div><!-- /.span -->
   </div><!-- /.row -->
 
@@ -298,11 +298,6 @@
         <td>20px</td>
         <td>{{_i}}Negative space between columns{{/i}}</td>
       </tr>
-      <tr>
-        <td><code>@siteWidth</code></td>
-        <td><em>{{_i}}Computed sum of all columns and gutters{{/i}}</em></td>
-        <td>{{_i}}Counts number of columns and gutters to set width of the <code>.container-fixed()</code> mixin{{/i}}</td>
-      </tr>
     </tbody>
   </table>
   <div class="row">
@@ -461,13 +456,13 @@
   @media (max-width: 480px) { ... }
 
   // {{_i}}Landscape phone to portrait tablet{{/i}}
-  @media (max-width: 768px) { ... }
+  @media (max-width: 767px) { ... }
 
   // {{_i}}Portrait tablet to landscape and desktop{{/i}}
-  @media (min-width: 768px) and (max-width: 980px) { ... }
+  @media (min-width: 768px) and (max-width: 979px) { ... }
 
   // {{_i}}Large desktop{{/i}}
-  @media (min-width: 1200px) { .. }
+  @media (min-width: 1200px) { ... }
 </pre>
     </div><!-- /.span -->
   </div><!-- /.row -->
@@ -478,7 +473,7 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}What are they{{/i}}</h2>
-      <p>{{_i}}For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.{{/i}}</p>
+      <p>{{_i}}For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.{{/i}}</p>
       <h3>{{_i}}When to use{{/i}}</h2>
       <p>{{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.{{/i}}</p>
       <p>{{_i}}For example, you might show a <code>&lt;select&gt;</code> element for nav on mobile layouts, but not on tablets or desktops.{{/i}}</p>
@@ -535,23 +530,25 @@
         </tbody>
       </table>
       <h3>{{_i}}Test case{{/i}}</h3>
-      <p>{{_i}}Resize your browser or load on different devices to test the above clases.{{/i}}</p>
+      <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
       <h4>{{_i}}Visible on...{{/i}}</h4>
+      <p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</p>
       <ul class="responsive-utilities-test">
-        <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-        <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-        <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+        <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
       <h4>{{_i}}Hidden on...{{/i}}</h4>
+      <p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</p>
       <ul class="responsive-utilities-test hidden-on">
-        <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-        <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-        <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+        <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
     </div><!-- /.span -->
   </div><!-- /.row -->
 
-      
+
   <div class="row">
     <div class="span4">
     </div><!-- /.span -->