Merge branch '2.0.1-wip'

1 files changed, 247 insertions, 180 deletions

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 38dd5587ab..acb9cdcb2d 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -299,7 +299,7 @@
     </div><!--/span-->
     <div class="span4">
       <h2>Basic block</h2>
-      <p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
+      <p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
 <pre>
 &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
 </pre>
@@ -309,6 +309,7 @@
 &lt;/pre&gt;
 </pre>
       <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
+      <p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
     </div><!--/span-->
     <div class="span4">
       <h2>Google Prettify</h2>
@@ -454,7 +455,7 @@
         <td>
           <code>.table-bordered</code>
         </td>
-        <td>{{_i}}Rounds corners and adds outter border{{/i}}</td>
+        <td>{{_i}}Rounds corners and adds outer border{{/i}}</td>
       </tr>
       <tr>
         <td>{{_i}}Zebra-stripe{{/i}}</td>
@@ -776,9 +777,9 @@
 
 
   <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
-  <h3>{{_i}}Basic form{{/i}}</h3>
   <div class="row">
     <div class="span3">
+      <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">
@@ -790,11 +791,22 @@
         </label>
         <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
       </form>
+<pre class="prettyprint linenums">
+&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;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 -->
-  <h3>{{_i}}Search form{{/i}}</h3>
   <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">
@@ -802,19 +814,35 @@
         <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 -->
-  <h3>{{_i}}Inline form{{/i}}</h3>
   <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">
-      <form class="well form-search">
+      <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}}">
-        <button type="submit" class="btn">{{_i}}Go{{/i}}</button>
+        <label class="checkbox">
+          <input type="checkbox"> {{_i}}Remember?{{/i}}
+        </label>
+        <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
       </form>
+<pre class="prettyprint linenums">
+&lt;form class="well form-inline"&gt;
+  &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
+  &lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
+  &lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt;
+&lt;/form&gt;
+</pre>
     </div>
   </div><!-- /row -->
 
@@ -880,10 +908,26 @@
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
-            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+            <button class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
       </form>
+      <h3>{{_i}}Example markup{{/i}}</h3>
+      <p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;form class="form-horizontal"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;{{_i}}Legend text{{/i}}&lt;/legend&gt;
+    &lt;div class="control-group"&gt;
+      &lt;label class="control-label" for="input01"&gt;{{_i}}Text input{{/i}}&lt;/label&gt;
+      &lt;div class="controls"&gt;
+        &lt;input type="text" class="input-xlarge" id="input01"&gt;
+        &lt;p class="help-block"&gt;{{_i}}Supporting help text{{/i}}&lt;/p&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
     </div>
     <div class="span4">
       <h3>{{_i}}What's included{{/i}}</h3>
@@ -973,14 +1017,14 @@
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
-            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+            <button class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </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 it's place for <code>:focus</code>.{{/i}}</p>
+      <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>
@@ -1001,7 +1045,7 @@
         <fieldset>
           <legend>{{_i}}Extending form controls{{/i}}</legend>
           <div class="control-group">
-            <label class="control-label">{{_i}}Form sizes{{/i}}</label>
+            <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
             <div class="controls docs-input-sizes">
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
@@ -1031,6 +1075,15 @@
             </div>
           </div>
           <div class="control-group">
+            <label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
+            <div class="controls docs-input-sizes">
+              <input class="input-mini" type="text" placeholder=".input-mini">
+              <input class="input-small" type="text" placeholder=".input-small">
+              <input class="input-medium" type="text" placeholder=".input-medium">
+              <p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
+            </div>
+          </div>          
+          <div class="control-group">
             <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
             <div class="controls">
               <div class="input-prepend">
@@ -1097,7 +1150,7 @@
           </div>
           <div class="form-actions">
             <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
-            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+            <button class="btn">{{_i}}Cancel{{/i}}</button>
           </div>
         </fieldset>
       </form>
@@ -1137,35 +1190,40 @@
     </thead>
     <tbody>
       <tr>
-        <td><a class="btn" href="#">{{_i}}Default{{/i}}</a></td>
+        <td><button class="btn" href="#">{{_i}}Default{{/i}}</button></td>
         <td><code>.btn</code></td>
         <td>{{_i}}Standard gray button with gradient{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td>
+        <td><button class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</button></td>
         <td><code>.btn-primary</code></td>
         <td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td>
+        <td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td>
         <td><code>.btn-info</code></td>
         <td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td>
+        <td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td>
         <td><code>.btn-success</code></td>
         <td>{{_i}}Indicates a successful or positive action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td>
+        <td><button class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</button></td>
         <td><code>.btn-warning</code></td>
         <td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
       </tr>
       <tr>
-        <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
+        <td><button class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</button></td>
         <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
       </tr>
+  	  <tr>
+        <td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td>
+        <td><code>.btn-inverse</code></td>
+        <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
+      </tr>
     </tbody>
   </table>
 
@@ -1173,50 +1231,63 @@
     <div class="span4">
       <h3>{{_i}}Buttons for actions{{/i}}</h3>
       <p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
+      <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <h3>{{_i}}Cross browser compatibility{{/i}}</h3>
+      <p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
     </div>
     <div class="span4">
-      <h3>{{_i}}For anchors and forms{{/i}}</h3>
-      <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
-    </div>
-    <div class="span4">
-      <p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.{{/i}}</p>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="span4">
       <h3>{{_i}}Multiple sizes{{/i}}</h3>
-      <p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
+      <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
       <p>
-        <a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
+        <button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-large">{{_i}}Action{{/i}}</button>
       </p>
       <p>
-        <a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
+        <button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-small">{{_i}}Action{{/i}}</button>
       </p>
-    </div>
-    <div class="span4">
+      <p>
+        <button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
+        <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+      </p>
+      <br>
       <h3>{{_i}}Disabled state{{/i}}</h3>
-      <p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.{{/i}}</p>
       <p>
-        <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary action{{/i}}</a>
-        <a href="#" class="btn btn-large disabled">{{_i}}Action{{/i}}</a>
+        <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+        <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
+      </p>
+      <p style="margin-bottom: 18px;">
+        <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+        <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
       </p>
       <p>
-        <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
-        <button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
       </p>
     </div>
     <div class="span4">
-      <h3>Cross browser compatibility</h3>
-      <p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
-      <p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
+      <h3>{{_i}}One class, multiple tags{{/i}}</h3>
+      <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
+<form>
+<a class="btn" href="">{{_i}}Link{{/i}}</a>
+<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
+<input class="btn" type="button" value="{{_i}}Input{{/i}}">
+<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
+</form>
+<pre class="prettyprint linenums">
+&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
+&lt;button class="btn" type="submit"&gt;
+  {{_i}}Button{{/i}}
+&lt;/button&gt;
+&lt;input class="btn" type="button" 
+         value="{{_i}}Input{{/i}}"&gt;
+&lt;input class="btn" type="submit" 
+         value="{{_i}}Submit{{/i}}"&gt;
+</pre>
+      <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
     </div>
   </div>
-
-  <br>
-
 </section>
 
 
@@ -1229,148 +1300,144 @@
   </div>
   <div class="row">
     <div class="span3">
-      <div class="the-icons">
-        <i class="icon-glass"></i>
-        <i class="icon-music"></i>
-        <i class="icon-search"></i>
-        <i class="icon-envelope"></i>
-        <i class="icon-heart"></i>
-        <i class="icon-star"></i>
-        <i class="icon-star-empty"></i>
-        <i class="icon-user"></i>
-        <i class="icon-film"></i>
-        <i class="icon-th-large"></i>
-        <i class="icon-th"></i>
-        <i class="icon-th-list"></i>
-        <i class="icon-ok"></i>
-        <i class="icon-remove"></i>
-        <i class="icon-zoom-in"></i>
-        <i class="icon-zoom-out"></i>
-        <i class="icon-off"></i>
-        <i class="icon-signal"></i>
-        <i class="icon-cog"></i>
-        <i class="icon-trash"></i>
-
-        <i class="icon-home"></i>
-        <i class="icon-file"></i>
-        <i class="icon-time"></i>
-        <i class="icon-road"></i>
-        <i class="icon-download-alt"></i>
-        <i class="icon-download"></i>
-        <i class="icon-upload"></i>
-        <i class="icon-inbox"></i>
-        <i class="icon-play-circle"></i>
-        <i class="icon-repeat"></i>
-      </div>
+      <ul class="the-icons">
+        <li><i class="icon-glass"></i> icon-glass</li>
+        <li><i class="icon-music"></i> icon-music</li>
+        <li><i class="icon-search"></i> icon-search</li>
+        <li><i class="icon-envelope"></i> icon-envelope</li>
+        <li><i class="icon-heart"></i> icon-heart</li>
+        <li><i class="icon-star"></i> icon-star</li>
+        <li><i class="icon-star-empty"></i> icon-star-empty</li>
+        <li><i class="icon-user"></i> icon-user</li>
+        <li><i class="icon-film"></i> icon-film</li>
+        <li><i class="icon-th-large"></i> icon-th-large</li>
+        <li><i class="icon-th"></i> icon-th</li>
+        <li><i class="icon-th-list"></i> icon-th-list</li>
+        <li><i class="icon-ok"></i> icon-ok</li>
+        <li><i class="icon-remove"></i> icon-remove</li>
+        <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
+        <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
+        <li><i class="icon-off"></i> icon-off</li>
+        <li><i class="icon-signal"></i> icon-signal</li>
+        <li><i class="icon-cog"></i> icon-cog</li>
+        <li><i class="icon-trash"></i> icon-trash</li>
+        <li><i class="icon-home"></i> icon-home</li>
+        <li><i class="icon-file"></i> icon-file</li>
+        <li><i class="icon-time"></i> icon-time</li>
+        <li><i class="icon-road"></i> icon-road</li>
+        <li><i class="icon-download-alt"></i> icon-download-alt</li>
+        <li><i class="icon-download"></i> icon-download</li>
+        <li><i class="icon-upload"></i> icon-upload</li>
+        <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">
-      <div class="the-icons">
-        <i class="icon-refresh"></i>
-        <i class="icon-list-alt"></i>
-        <i class="icon-lock"></i>
-        <i class="icon-flag"></i>
-        <i class="icon-headphones"></i>
-        <i class="icon-volume-off"></i>
-        <i class="icon-volume-down"></i>
-        <i class="icon-volume-up"></i>
-        <i class="icon-qrcode"></i>
-        <i class="icon-barcode"></i>
-
-        <i class="icon-tag"></i>
-        <i class="icon-tags"></i>
-        <i class="icon-book"></i>
-        <i class="icon-bookmark"></i>
-        <i class="icon-print"></i>
-        <i class="icon-camera"></i>
-        <i class="icon-font"></i>
-        <i class="icon-bold"></i>
-        <i class="icon-italic"></i>
-        <i class="icon-text-height"></i>
-        <i class="icon-text-width"></i>
-        <i class="icon-align-left"></i>
-        <i class="icon-align-center"></i>
-        <i class="icon-align-right"></i>
-        <i class="icon-align-justify"></i>
-        <i class="icon-list"></i>
-        <i class="icon-indent-left"></i>
-        <i class="icon-indent-right"></i>
-        <i class="icon-facetime-video"></i>
-        <i class="icon-picture"></i>
-      </div>
+      <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>
+        <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>
+        <li><i class="icon-qrcode"></i> icon-qrcode</li>
+        <li><i class="icon-barcode"></i> icon-barcode</li>
+        <li><i class="icon-tag"></i> icon-tag</li>
+        <li><i class="icon-tags"></i> icon-tags</li>
+        <li><i class="icon-book"></i> icon-book</li>
+        <li><i class="icon-bookmark"></i> icon-bookmark</li>
+        <li><i class="icon-print"></i> icon-print</li>
+        <li><i class="icon-camera"></i> icon-camera</li>
+        <li><i class="icon-font"></i> icon-font</li>
+        <li><i class="icon-bold"></i> icon-bold</li>
+        <li><i class="icon-italic"></i> icon-italic</li>
+        <li><i class="icon-text-height"></i> icon-text-height</li>
+        <li><i class="icon-text-width"></i> icon-text-width</li>
+        <li><i class="icon-align-left"></i> icon-align-left</li>
+        <li><i class="icon-align-center"></i> icon-align-center</li>
+        <li><i class="icon-align-right"></i> icon-align-right</li>
+        <li><i class="icon-align-justify"></i> icon-align-justify</li>
+        <li><i class="icon-list"></i> icon-list</li>
+        <li><i class="icon-indent-left"></i> icon-indent-left</li>
+        <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">
-      <div class="the-icons">
-        <i class="icon-pencil"></i>
-        <i class="icon-map-marker"></i>
-        <i class="icon-adjust"></i>
-        <i class="icon-tint"></i>
-        <i class="icon-edit"></i>
-        <i class="icon-share"></i>
-        <i class="icon-check"></i>
-        <i class="icon-move"></i>
-        <i class="icon-step-backward"></i>
-        <i class="icon-fast-backward"></i>
-        <i class="icon-backward"></i>
-        <i class="icon-play"></i>
-        <i class="icon-pause"></i>
-        <i class="icon-stop"></i>
-        <i class="icon-forward"></i>
-        <i class="icon-fast-forward"></i>
-        <i class="icon-step-forward"></i>
-        <i class="icon-eject"></i>
-        <i class="icon-chevron-left"></i>
-        <i class="icon-chevron-right"></i>
-
-        <i class="icon-plus-sign"></i>
-        <i class="icon-minus-sign"></i>
-        <i class="icon-remove-sign"></i>
-        <i class="icon-ok-sign"></i>
-        <i class="icon-question-sign"></i>
-        <i class="icon-info-sign"></i>
-        <i class="icon-screenshot"></i>
-        <i class="icon-remove-circle"></i>
-        <i class="icon-ok-circle"></i>
-        <i class="icon-ban-circle"></i>
-      </div>
+      <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>
+        <li><i class="icon-tint"></i> icon-tint</li>
+        <li><i class="icon-edit"></i> icon-edit</li>
+        <li><i class="icon-share"></i> icon-share</li>
+        <li><i class="icon-check"></i> icon-check</li>
+        <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>
+        <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>
+        <li><i class="icon-stop"></i> icon-stop</li>
+        <li><i class="icon-forward"></i> icon-forward</li>
+        <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
+        <li><i class="icon-step-forward"></i> icon-step-forward</li>
+        <li><i class="icon-eject"></i> icon-eject</li>
+        <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
+        <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
+        <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
+        <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
+        <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
+        <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
+        <li><i class="icon-question-sign"></i> icon-question-sign</li>
+        <li><i class="icon-info-sign"></i> icon-info-sign</li>
+        <li><i class="icon-screenshot"></i> icon-screenshot</li>
+        <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">
-      <div class="the-icons">
-        <i class="icon-arrow-left"></i>
-        <i class="icon-arrow-right"></i>
-        <i class="icon-arrow-up"></i>
-        <i class="icon-arrow-down"></i>
-        <i class="icon-share-alt"></i>
-        <i class="icon-resize-full"></i>
-        <i class="icon-resize-small"></i>
-        <i class="icon-plus"></i>
-        <i class="icon-minus"></i>
-        <i class="icon-asterisk"></i>
-
-        <i class="icon-exclamation-sign"></i>
-        <i class="icon-gift"></i>
-        <i class="icon-leaf"></i>
-        <i class="icon-fire"></i>
-        <i class="icon-eye-open"></i>
-        <i class="icon-eye-close"></i>
-        <i class="icon-warning-sign"></i>
-        <i class="icon-plane"></i>
-        <i class="icon-calendar"></i>
-        <i class="icon-random"></i>
-        <i class="icon-comment"></i>
-        <i class="icon-magnet"></i>
-        <i class="icon-chevron-up"></i>
-        <i class="icon-chevron-down"></i>
-        <i class="icon-retweet"></i>
-        <i class="icon-shopping-cart"></i>
-        <i class="icon-folder-close"></i>
-        <i class="icon-folder-open"></i>
-        <i class="icon-resize-vertical"></i>
-        <i class="icon-resize-horizontal"></i>
-      </div>
+      <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>
+        <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
+        <li><i class="icon-share-alt"></i> icon-share-alt</li>
+        <li><i class="icon-resize-full"></i> icon-resize-full</li>
+        <li><i class="icon-resize-small"></i> icon-resize-small</li>
+        <li><i class="icon-plus"></i> icon-plus</li>
+        <li><i class="icon-minus"></i> icon-minus</li>
+        <li><i class="icon-asterisk"></i> icon-asterisk</li>
+        <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
+        <li><i class="icon-gift"></i> icon-gift</li>
+        <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>
+        <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>
+        <li><i class="icon-calendar"></i> icon-calendar</li>
+        <li><i class="icon-random"></i> icon-random</li>
+        <li><i class="icon-comment"></i> icon-comment</li>
+        <li><i class="icon-magnet"></i> icon-magnet</li>
+        <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
+        <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
+        <li><i class="icon-retweet"></i> icon-retweet</li>
+        <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
+        <li><i class="icon-folder-close"></i> icon-folder-close</li>
+        <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>
+      </ul>
     </div>
   </div>
   <div class="alert alert-info">
-    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
+    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}}
   </div>
 
   <br>
@@ -1419,7 +1486,7 @@
           <a class="btn" href="#"><i class="icon-align-justify"></i></a>
         </div>
         <div class="btn-group">
-          <a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
+          <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
           <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>