Merge branch '3.0.0-wip' into bs3-flatten

4 files changed, 115 insertions, 380 deletions

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 44d86f8a7..f7fc48ba5 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1121,29 +1121,25 @@
           <h2>Standard pagination</h2>
           <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
           <div class="bs-docs-example">
-            <div class="pagination">
-              <ul>
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-              </ul>
-            </div>
+            <ul class="pagination">
+              <li><a href="#">&laquo;</a></li>
+              <li><a href="#">1</a></li>
+              <li><a href="#">2</a></li>
+              <li><a href="#">3</a></li>
+              <li><a href="#">4</a></li>
+              <li><a href="#">5</a></li>
+              <li><a href="#">&raquo;</a></li>
+            </ul>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="pagination"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
+&lt;ul class="pagination"&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
 </pre>
 
 
@@ -1155,43 +1151,37 @@
           <h3>Disabled and active states</h3>
           <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
           <div class="bs-docs-example">
-            <div class="pagination pagination-centered">
-              <ul>
-                <li class="disabled"><a href="#">&laquo;</a></li>
-                <li class="active"><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-             </ul>
-            </div>
+            <ul class="pagination">
+              <li class="disabled"><a href="#">&laquo;</a></li>
+              <li class="active"><a href="#">1</a></li>
+              <li><a href="#">2</a></li>
+              <li><a href="#">3</a></li>
+              <li><a href="#">4</a></li>
+              <li><a href="#">5</a></li>
+              <li><a href="#">&raquo;</a></li>
+           </ul>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="pagination"&gt;
-  &lt;ul&gt;
-    &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
-    &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
+&lt;ul class="pagination"&gt;
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
+  &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
           <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
 <pre class="prettyprint linenums">
-&lt;div class="pagination"&gt;
-  &lt;ul&gt;
-    &lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
-    &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
+&lt;ul class="pagination"&gt;
+  &lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
+  &lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
 
           <h3>Sizes</h3>
           <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
           <div class="bs-docs-example">
-            <div class="pagination pagination-large">
-              <ul>
+            <div>
+              <ul class="pagination pagination-large">
                 <li><a href="#">&laquo;</a></li>
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
@@ -1201,19 +1191,8 @@
                 <li><a href="#">&raquo;</a></li>
               </ul>
             </div>
-            <div class="pagination">
-              <ul>
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-             </ul>
-            </div>
-            <div class="pagination pagination-small">
-              <ul>
+            <div>
+              <ul class="pagination">
                 <li><a href="#">&laquo;</a></li>
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
@@ -1223,8 +1202,8 @@
                 <li><a href="#">&raquo;</a></li>
               </ul>
             </div>
-            <div class="pagination pagination-mini">
-              <ul>
+            <div>
+              <ul class="pagination pagination-small">
                 <li><a href="#">&laquo;</a></li>
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
@@ -1234,53 +1213,8 @@
                 <li><a href="#">&raquo;</a></li>
               </ul>
             </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="pagination pagination-large"&gt;
-  &lt;ul&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div class="pagination"&gt;
-  &lt;ul&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div class="pagination pagination-small"&gt;
-  &lt;ul&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-&lt;div class="pagination pagination-mini"&gt;
-  &lt;ul&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-          <h3>Alignment</h3>
-          <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
-          <div class="bs-docs-example">
-            <div class="pagination pagination-centered">
-              <ul>
-                <li><a href="#">&laquo;</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">4</a></li>
-                <li><a href="#">5</a></li>
-                <li><a href="#">&raquo;</a></li>
-             </ul>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="pagination pagination-centered"&gt;
-  ...
-&lt;/div&gt;
-</pre>
-          <div class="bs-docs-example">
-            <div class="pagination pagination-right">
-              <ul>
+            <div>
+              <ul class="pagination pagination-mini">
                 <li><a href="#">&laquo;</a></li>
                 <li><a href="#">1</a></li>
                 <li><a href="#">2</a></li>
@@ -1292,9 +1226,18 @@
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="pagination pagination-right"&gt;
+&lt;ul class="pagination pagination-large"&gt;
   ...
-&lt;/div&gt;
+&lt;/ul&gt;
+&lt;ul class="pagination"&gt;
+  ...
+&lt;/ul&gt;
+&lt;ul class="pagination pagination-small"&gt;
+  ...
+&lt;/ul&gt;
+&lt;ul class="pagination pagination-mini"&gt;
+  ...
+&lt;/ul&gt;
 </pre>
 
 
@@ -1410,7 +1353,7 @@
               </tr>
               <tr>
                 <td>
-                  Important
+                  Danger
                 </td>
                 <td>
                   <span class="badge badge-danger">6</span>
@@ -1419,28 +1362,6 @@
                   <code>&lt;span class="badge badge-danger"&gt;6&lt;/span&gt;</code>
                 </td>
               </tr>
-              <tr>
-                <td>
-                  Info
-                </td>
-                <td>
-                  <span class="badge badge-info">8</span>
-                </td>
-                <td>
-                  <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Inverse
-                </td>
-                <td>
-                  <span class="badge badge-inverse">10</span>
-                </td>
-                <td>
-                  <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
-                </td>
-              </tr>
             </tbody>
           </table>
 
@@ -2070,7 +1991,7 @@ class="muted"
 </pre>
 
           <h4>.clearfix</h4>
-          <p>Clear the <code>float</code> on any element.</p>
+          <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
 <pre class="prettyprint linenums">
 class="clearfix"
 </pre>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 30b0e68e6..f3209f1e8 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -242,20 +242,31 @@
 
           <p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
 
+          <h3>Alignment classes</h3>
+          <p>Easily realign text to components with text alignment classes.</p>
+          <div class="bs-docs-example">
+            <p class="text-left">Left aligned text.</p>
+            <p class="text-center">Center aligned text.</p>
+            <p class="text-right">Right aligned text.</p>
+          </div>
+<pre class="prettyprint linenums">
+&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
+&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
+&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
+</pre>
+
           <h3>Emphasis classes</h3>
           <p>Convey meaning through color with a handful of emphasis utility classes.</p>
           <div class="bs-docs-example">
             <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
             <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
             <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
-            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
             <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
           </div>
 <pre class="prettyprint linenums">
 &lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
 &lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
 &lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
-&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
 &lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
 </pre>
 
@@ -1408,17 +1419,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
           <h3 id="forms-extending-sizes">Control sizing</h3>
           <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
 
-          <h4>Block level inputs</h4>
-          <p>Make any <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> element behave like a block level element.</p>
-          <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls">
-              <input class="input-block-level" type="text" placeholder=".input-block-level">
-            </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;input class="input-block-level" type="text" placeholder=".input-block-level"&gt;
-</pre>
-
           <h4>Relative sizing</h4>
           <p>Create larger or smaller form controls that match button sizes.</p>
           <form class="bs-docs-example" style="padding-bottom: 15px;">
@@ -1478,38 +1478,32 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
   ...
 &lt;/select&gt;
 </pre>
-
-          <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
+          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
           <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls controls-row">
-              <input class="span5" type="text" placeholder=".span5">
-            </div>
-            <div class="controls controls-row">
-              <input class="span4" type="text" placeholder=".span4">
-              <input class="span1" type="text" placeholder=".span1">
-            </div>
-            <div class="controls controls-row">
-              <input class="span3" type="text" placeholder=".span3">
-              <input class="span2" type="text" placeholder=".span2">
-            </div>
-            <div class="controls controls-row">
-              <input class="span2" type="text" placeholder=".span2">
-              <input class="span3" type="text" placeholder=".span3">
-            </div>
-            <div class="controls controls-row">
-              <input class="span1" type="text" placeholder=".span1">
-              <input class="span4" type="text" placeholder=".span4">
+            <div class="row">
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="controls"&gt;
-  &lt;input class="span5" type="text" placeholder=".span5"&gt;
-&lt;/div&gt;
-&lt;div class="controls controls-row"&gt;
-  &lt;input class="span4" type="text" placeholder=".span4"&gt;
-  &lt;input class="span1" type="text" placeholder=".span1"&gt;
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
 &lt;/div&gt;
-...
 </pre>
 
           <h3>Uneditable inputs</h3>
@@ -1562,7 +1556,7 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
           <h2>Form control states</h2>
           <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
 
-          <h3>Input focus</h3>
+          <h3 id="forms-input-focus">Input focus</h3>
           <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
           <form class="bs-docs-example form-inline">
             <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
@@ -1571,8 +1565,8 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
 </pre>
 
-          <h3>Invalid inputs</h3>
-          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
+          <h3 id="forms-invalid-inputs">Invalid inputs</h3>
+          <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
           <form class="bs-docs-example form-inline">
             <input class="span3" type="email" placeholder="[email protected]" required>
           </form>
@@ -1580,7 +1574,7 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;input class="span3" type="email" required&gt;
 </pre>
 
-          <h3>Disabled inputs</h3>
+          <h3 id="forms-disabled-inputs">Disabled inputs</h3>
           <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
           <form class="bs-docs-example form-inline">
             <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
@@ -1589,7 +1583,7 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
 </pre>
 
-          <h3>Disabled fieldsets</h3>
+          <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
           <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
           <form class="bs-docs-example form-inline">
             <fieldset disabled>
@@ -1626,59 +1620,51 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
 &lt;/form&gt;
 </pre>
 
-          <h3>Validation states</h3>
-          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
+          <h3 id="forms-validation">Validation states</h3>
+          <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
+          <ul>
+            <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
+            <li>Add .input-with-feedback to the field(s) in question</li>
+          </ul>
+          <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
 
           <form class="bs-docs-example form-horizontal">
-            <div class="control-group warning">
+            <div class="control-group has-warning">
               <label class="control-label" for="inputWarning">Input with warning</label>
               <div class="controls">
-                <input type="text" id="inputWarning">
-                <span class="help-inline">Something may have gone wrong</span>
+                <input type="text" class="input-with-feedback" id="inputWarning">
               </div>
             </div>
-            <div class="control-group error">
+            <div class="control-group has-error">
               <label class="control-label" for="inputError">Input with error</label>
               <div class="controls">
-                <input type="text" id="inputError">
-                <span class="help-inline">Please correct the error</span>
-              </div>
-            </div>
-            <div class="control-group info">
-              <label class="control-label" for="inputInfo">Input with info</label>
-              <div class="controls">
-                <input type="text" id="inputInfo">
-                <span class="help-inline">Username is taken</span>
+                <input type="text" class="input-with-feedback" id="inputError">
               </div>
             </div>
-            <div class="control-group success">
+            <div class="control-group has-success">
               <label class="control-label" for="inputSuccess">Input with success</label>
               <div class="controls">
-                <input type="text" id="inputSuccess">
-                <span class="help-inline">Woohoo!</span>
+                <input type="text" class="input-with-feedback" id="inputSuccess">
               </div>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="control-group warning"&gt;
+&lt;div class="control-group has-warning"&gt;
   &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputWarning"&gt;
-    &lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="control-group error"&gt;
+&lt;div class="control-group has-error"&gt;
   &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputError"&gt;
-    &lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="control-group success"&gt;
+&lt;div class="control-group has-success"&gt;
   &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputSuccess"&gt;
-    &lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
+    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache
deleted file mode 100644
index 7747fff3e..000000000
--- a/docs/templates/pages/extend.mustache
+++ /dev/null
@@ -1,169 +0,0 @@
-<!-- Subhead
-================================================== -->
-<header class="bs-docs-jumbotron subhead">
-  <div class="container">
-    <h1>Extending Bootstrap</h1>
-    <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
-  <div>
-</header>
-
-  <div class="container">
-
-    <!-- Docs nav
-    ================================================== -->
-    <div class="row">
-      <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav">
-          <li><a href="#built-with-less"><i class="glyphicon-chevron-right"></i> Built with LESS</a></li>
-          <li><a href="#compiling"><i class="glyphicon-chevron-right"></i> Compiling Bootstrap</a></li>
-          <li><a href="#static-assets"><i class="glyphicon-chevron-right"></i> Use as static assets</a></li>
-        </ul>
-      </div>
-      <div class="span9">
-
-
-
-        <!-- BUILT WITH LESS
-        ================================================== -->
-        <section id="built-with-less">
-          <div class="page-header">
-            <h1>Built with LESS</h1>
-          </div>
-
-          <img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS">
-          <p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
-
-          <h3>Why LESS?</h3>
-          <p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p>
-          <ul>
-            <li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li>
-            <li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li>
-            <li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li>
-          </ul>
-
-          <h3>What's included?</h3>
-          <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
-
-          <h3>Learn more</h3>
-          <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
-        </section>
-
-
-
-        <!-- COMPILING LESS AND BOOTSTRAP
-        ================================================== -->
-        <section id="compiling">
-          <div class="page-header">
-            <h1>Compiling Bootstrap with Less</h1>
-          </div>
-
-          <p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p>
-
-          <div class="alert alert-info">
-            <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
-          </div>
-
-          <h2>Tools for compiling</h2>
-
-          <h3>Node with makefile</h3>
-          <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
-          <pre>$ npm install -g less jshint recess uglify-js</pre>
-          <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
-          <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
-
-          <h3>Command line</h3>
-          <p>Install the LESS command line tool via Node and run the following command:</p>
-          <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
-          <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
-
-          <h3>JavaScript</h3>
-          <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
-<pre class="prettyprint">
-&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
-&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
-</pre>
-          <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
-
-          <h3>Unofficial Mac app</h3>
-          <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
-
-          <h3>More apps</h3>
-          <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
-          <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
-          <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
-          <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
-          <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
-          <p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
-
-        </section>
-
-
-
-        <!-- Static assets
-        ================================================== -->
-        <section id="static-assets">
-          <div class="page-header">
-            <h1>Use as static assets</h1>
-          </div>
-          <p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p>
-
-          <h3>Setup file structure</h3>
-          <p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p>
-<pre>
-  <span class="icon-folder-open"></span> app/
-      <span class="icon-folder-open"></span> layouts/
-      <span class="icon-folder-open"></span> templates/
-  <span class="icon-folder-open"></span> public/
-      <span class="icon-folder-open"></span> css/
-          <span class="icon-file"></span> bootstrap.min.css
-      <span class="icon-folder-open"></span> js/
-          <span class="icon-file"></span> bootstrap.min.js
-      <span class="icon-folder-open"></span> img/
-          <span class="icon-file"></span> glyphicons-halflings.png
-          <span class="icon-file"></span> glyphicons-halflings-white.png
-</pre>
-
-          <h3>Utilize starter template</h3>
-          <p>Copy the following base HTML to get started.</p>
-<pre class="prettyprint linenums">
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
-    &lt;!-- Bootstrap --&gt;
-    &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Hello, world!&lt;/h1&gt;
-    &lt;!-- Bootstrap --&gt;
-    &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-          <h3>Layer on custom code</h3>
-          <p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p>
-<pre class="prettyprint linenums">
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
-    &lt;!-- Bootstrap --&gt;
-    &lt;link href="public/css/bootstrap.min.css" rel="stylesheet"&gt;
-    &lt;!-- Project --&gt;
-    &lt;link href="public/css/application.css" rel="stylesheet"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Hello, world!&lt;/h1&gt;
-    &lt;!-- Bootstrap --&gt;
-    &lt;script src="public/js/bootstrap.min.js"&gt;&lt;/script&gt;
-    &lt;!-- Project --&gt;
-    &lt;script src="public/js/application.js"&gt;&lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-        </section>
-
-      </div>{{! /span9 }}
-    </div>{{! row}}
-
-  </div>{{! /.container }}
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index b0eb23bf2..1c71d1151 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -12,9 +12,6 @@
       <li>
         <a href="./getting-started.html#examples" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);"{{/production}}>Examples</a>
       </li>
-      <li>
-        <a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a>
-      </li>
       <li>Version 3.0.0</li>
     </ul>
   </div>