Merge branch 'master' into deprecate-screen-device-vars

Conflicts:
	less/variables.less

1 files changed, 336 insertions, 237 deletions

diff --git a/css.html b/css.html
index d705ca549..0d3fc11ef 100644
--- a/css.html
+++ b/css.html
@@ -80,20 +80,20 @@ base_url: "../"
 /* No media query since this is the default in Bootstrap */
 
 /* Small devices (tablets, 768px and up) */
-@media (min-width: @screen-tablet) { ... }
+@media (min-width: @screen-sm) { ... }
 
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: @screen-desktop) { ... }
+@media (min-width: @screen-md) { ... }
 
 /* Large devices (large desktops, 1200px and up) */
-@media (min-width: @screen-large-desktop) { ... }
+@media (min-width: @screen-lg) { ... }
 {% endhighlight %}
     <p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
 {% highlight css %}
 @media (max-width: @screen-phone-max) { ... }
-@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }
-@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { ... }
-@media (min-width: @screen-large-desktop) { ... }
+@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
+@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
+@media (min-width: @screen-lg) { ... }
 {% endhighlight %}
 
     <h3 id="grid-options">Grid options</h3>
@@ -588,46 +588,80 @@ base_url: "../"
     <!-- Headings -->
     <h2 id="type-headings">Headings</h2>
     <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
-
     <div class="bs-example bs-example-type">
       <table class="table">
         <tbody>
           <tr>
             <td><h1>h1. Bootstrap heading</h1></td>
-            <td>Semibold 36px</td>
+            <td class="info">Semibold 36px</td>
           </tr>
           <tr>
             <td><h2>h2. Bootstrap heading</h2></td>
-            <td>Semibold 30px</td>
+            <td class="info">Semibold 30px</td>
           </tr>
           <tr>
             <td><h3>h3. Bootstrap heading</h3></td>
-            <td>Semibold 24px</td>
+            <td class="info">Semibold 24px</td>
           </tr>
           <tr>
             <td><h4>h4. Bootstrap heading</h4></td>
-            <td>Semibold 18px</td>
+            <td class="info">Semibold 18px</td>
           </tr>
           <tr>
             <td><h5>h5. Bootstrap heading</h5></td>
-            <td>Semibold 14px</td>
+            <td class="info">Semibold 14px</td>
           </tr>
           <tr>
             <td><h6>h6. Bootstrap heading</h6></td>
-            <td>Semibold 12px</td>
+            <td class="info">Semibold 12px</td>
           </tr>
         </tbody>
       </table>
     </div>
 {% highlight html %}
-<h1>...</h1>
-<h2>...</h2>
-<h3>...</h3>
-<h4>...</h4>
-<h5>...</h5>
-<h6>...</h6>
+<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
 {% endhighlight %}
 
+    <p>Also included with headings is an autoscaling <code>&lt;small&gt;</code> element. Use it for smaller, gray secondary text in any heading.</p>
+    <div class="bs-example bs-example-type">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
+          </tr>
+          <tr>
+            <td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
+          </tr>
+          <tr>
+            <td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
+          </tr>
+          <tr>
+            <td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
+          </tr>
+          <tr>
+            <td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
+          </tr>
+          <tr>
+            <td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+{% highlight html %}
+<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
+<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
+<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
+<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
+<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
+<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
+{% endhighlight %}
+
+
     <!-- Body copy -->
     <h2 id="type-body-copy">Body copy</h2>
     <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
@@ -1446,27 +1480,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-example">Basic example</h2>
     <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
-    <form class="bs-example" role="form">
-      <div class="form-group">
-        <label for="exampleInputEmail1">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-      </div>
-      <div class="form-group">
-        <label for="exampleInputPassword1">Password</label>
-        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-      </div>
-      <div class="form-group">
-        <label for="exampleInputFile">File input</label>
-        <input type="file" id="exampleInputFile">
-        <p class="help-block">Example block-level help text here.</p>
-      </div>
-      <div class="checkbox">
-        <label>
-          <input type="checkbox"> Check me out
-        </label>
-      </div>
-      <button type="submit" class="btn btn-default">Submit</button>
-    </form><!-- /example -->
+    <div class="bs-example">
+      <form role="form">
+        <div class="form-group">
+          <label for="exampleInputEmail1">Email address</label>
+          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+        </div>
+        <div class="form-group">
+          <label for="exampleInputPassword1">Password</label>
+          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+        </div>
+        <div class="form-group">
+          <label for="exampleInputFile">File input</label>
+          <input type="file" id="exampleInputFile">
+          <p class="help-block">Example block-level help text here.</p>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox"> Check me out
+          </label>
+        </div>
+        <button type="submit" class="btn btn-default">Submit</button>
+      </form>
+    </div><!-- /example -->
 {% highlight html %}
 <form role="form">
   <div class="form-group">
@@ -1502,22 +1538,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h4>Always add labels</h4>
       <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
     </div>
-    <form class="bs-example form-inline" role="form">
-      <div class="form-group">
-        <label class="sr-only" for="exampleInputEmail2">Email address</label>
-        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
-      </div>
-      <div class="form-group">
-        <label class="sr-only" for="exampleInputPassword2">Password</label>
-        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
-      </div>
-      <div class="checkbox">
-        <label>
-          <input type="checkbox"> Remember me
-        </label>
-      </div>
-      <button type="submit" class="btn btn-default">Sign in</button>
-    </form><!-- /example -->
+    <div class="bs-example">
+      <form class="form-inline" role="form">
+        <div class="form-group">
+          <label class="sr-only" for="exampleInputEmail2">Email address</label>
+          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
+        </div>
+        <div class="form-group">
+          <label class="sr-only" for="exampleInputPassword2">Password</label>
+          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
+        </div>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox"> Remember me
+          </label>
+        </div>
+        <button type="submit" class="btn btn-default">Sign in</button>
+      </form>
+    </div><!-- /example -->
 {% highlight html %}
 <form class="form-inline" role="form">
   <div class="form-group">
@@ -1540,34 +1578,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-horizontal">Horizontal form</h2>
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
-    <form class="bs-example form-horizontal">
-      <div class="form-group">
-        <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
-        <div class="col-lg-10">
-          <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
+    <div class="bs-example">
+      <form class="form-horizontal">
+        <div class="form-group">
+          <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
+          <div class="col-lg-10">
+            <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
+          </div>
         </div>
-      </div>
-      <div class="form-group">
-        <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
-        <div class="col-lg-10">
-          <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
+        <div class="form-group">
+          <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
+          <div class="col-lg-10">
+            <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
+          </div>
         </div>
-      </div>
-      <div class="form-group">
-        <div class="col-lg-offset-2 col-lg-10">
-          <div class="checkbox">
-            <label>
-              <input type="checkbox"> Remember me
-            </label>
+        <div class="form-group">
+          <div class="col-lg-offset-2 col-lg-10">
+            <div class="checkbox">
+              <label>
+                <input type="checkbox"> Remember me
+              </label>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="form-group">
-        <div class="col-lg-offset-2 col-lg-10">
-          <button type="submit" class="btn btn-default">Sign in</button>
+        <div class="form-group">
+          <div class="col-lg-offset-2 col-lg-10">
+            <button type="submit" class="btn btn-default">Sign in</button>
+          </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <form class="form-horizontal" role="form">
   <div class="form-group">
@@ -1609,18 +1649,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h4>Type declaration required</h4>
       <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
     </div>
-    <form class="bs-example">
-      <input type="text" class="form-control" placeholder="Text input">
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <input type="text" class="form-control" placeholder="Text input">
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <input type="text" class="form-control" placeholder="Text input">
 {% endhighlight %}
 
     <h3>Textarea</h3>
     <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
-    <form class="bs-example">
-      <textarea class="form-control" rows="3"></textarea>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <textarea class="form-control" rows="3"></textarea>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <textarea class="form-control" rows="3"></textarea>
 {% endhighlight %}
@@ -1628,27 +1672,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Checkboxes and radios</h3>
     <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
     <h4>Default (stacked)</h4>
-    <form class="bs-example">
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" value="">
-          Option one is this and that&mdash;be sure to include why it's great
-        </label>
-      </div>
-      <br>
-      <div class="radio">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-          Option one is this and that&mdash;be sure to include why it's great
-        </label>
-      </div>
-      <div class="radio">
-        <label>
-          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-          Option two can be something else and selecting it will deselect option one
-        </label>
-      </div>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <div class="checkbox">
+          <label>
+            <input type="checkbox" value="">
+            Option one is this and that&mdash;be sure to include why it's great
+          </label>
+        </div>
+        <br>
+        <div class="radio">
+          <label>
+            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+            Option one is this and that&mdash;be sure to include why it's great
+          </label>
+        </div>
+        <div class="radio">
+          <label>
+            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+            Option two can be something else and selecting it will deselect option one
+          </label>
+        </div>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="checkbox">
   <label>
@@ -1673,17 +1719,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Inline checkboxes</h4>
     <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
-    <form class="bs-example">
-      <label class="checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-      </label>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <label class="checkbox-inline">
+          <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+        </label>
+        <label class="checkbox-inline">
+          <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+        </label>
+        <label class="checkbox-inline">
+          <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+        </label>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -1698,23 +1746,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Selects</h3>
     <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
-    <form class="bs-example">
-      <select class="form-control">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
-      </select>
-      <br>
-      <select multiple class="form-control">
-        <option>1</option>
-        <option>2</option>
-        <option>3</option>
-        <option>4</option>
-        <option>5</option>
-      </select>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <select class="form-control">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+        <br>
+        <select multiple class="form-control">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <select class="form-control">
   <option>1</option>
@@ -1736,20 +1786,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-controls-static">Static control</h2>
     <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
-    <form class="bs-example form-horizontal">
-      <div class="form-group">
-        <label class="col-lg-2 control-label">Email</label>
-        <div class="col-lg-10">
-          <p class="form-control-static">[email protected]</p>
+    <div class="bs-example">
+      <form class="form-horizontal" role="form">
+        <div class="form-group">
+          <label class="col-lg-2 control-label">Email</label>
+          <div class="col-lg-10">
+            <p class="form-control-static">[email protected]</p>
+          </div>
         </div>
-      </div>
-      <div class="form-group">
-        <label for="inputPassword" class="col-lg-2 control-label">Password</label>
-        <div class="col-lg-10">
-          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+        <div class="form-group">
+          <label for="inputPassword" class="col-lg-2 control-label">Password</label>
+          <div class="col-lg-10">
+            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+          </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <form class="form-horizontal" role="form">
   <div class="form-group">
@@ -1773,18 +1825,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <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-example">
-      <input class="form-control" id="focusedInput" type="text" value="This is focused...">
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <input class="form-control" id="focusedInput" type="text" value="This is focused...">
+      </form>
+    </div>
 {% highlight html %}
 <input class="form-control" id="focusedInput" type="text" value="This is focused...">
 {% endhighlight %}
 
     <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-example">
-      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
 {% endhighlight %}
@@ -1802,28 +1858,30 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
     </div>
 
-    <form class="bs-example">
-      <fieldset disabled>
-        <div class="form-group">
-          <label for="disabledTextInput">Disabled input</label>
-          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
-        </div>
-        <div class="form-group">
-          <label for="disabledSelect">Disabled select menu</label>
-          <select id="disabledSelect" class="form-control">
-            <option>Disabled select</option>
-          </select>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox"> Can't check this
-          </label>
-        </div>
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </fieldset>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <fieldset disabled>
+          <div class="form-group">
+            <label for="disabledTextInput">Disabled input</label>
+            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+          </div>
+          <div class="form-group">
+            <label for="disabledSelect">Disabled select menu</label>
+            <select id="disabledSelect" class="form-control">
+              <option>Disabled select</option>
+            </select>
+          </div>
+          <div class="checkbox">
+            <label>
+              <input type="checkbox"> Can't check this
+            </label>
+          </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </fieldset>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-inline" role="form">
+<form role="form">
   <fieldset disabled>
     <div class="form-group">
       <label for="disabledTextInput">Disabled input</label>
@@ -1848,20 +1906,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-validation">Validation states</h3>
     <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
 
-    <form class="bs-example">
-      <div class="form-group has-success">
-        <label class="control-label" for="inputSuccess">Input with success</label>
-        <input type="text" class="form-control" id="inputSuccess">
-      </div>
-      <div class="form-group has-warning">
-        <label class="control-label" for="inputWarning">Input with warning</label>
-        <input type="text" class="form-control" id="inputWarning">
-      </div>
-      <div class="form-group has-error">
-        <label class="control-label" for="inputError">Input with error</label>
-        <input type="text" class="form-control" id="inputError">
-      </div>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <div class="form-group has-success">
+          <label class="control-label" for="inputSuccess">Input with success</label>
+          <input type="text" class="form-control" id="inputSuccess">
+        </div>
+        <div class="form-group has-warning">
+          <label class="control-label" for="inputWarning">Input with warning</label>
+          <input type="text" class="form-control" id="inputWarning">
+        </div>
+        <div class="form-group has-error">
+          <label class="control-label" for="inputError">Input with error</label>
+          <input type="text" class="form-control" id="inputError">
+        </div>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="form-group has-success">
   <label class="control-label" for="inputSuccess">Input with success</label>
@@ -1883,23 +1943,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Height sizing</h3>
     <p>Create larger or smaller form controls that match button sizes.</p>
-    <form class="bs-example bs-example-control-sizing">
-      <div class="controls docs-input-sizes">
-        <input class="form-control input-lg" type="text" placeholder=".input-lg">
-        <input type="text" class="form-control" placeholder="Default input">
-        <input class="form-control input-sm" type="text" placeholder=".input-sm">
-
-        <select class="form-control input-lg">
-          <option value="">.input-lg</option>
-        </select>
-        <select class="form-control">
-          <option value="">Default select</option>
-        </select>
-        <select class="form-control input-sm">
-          <option value="">.input-sm</option>
-        </select>
-      </div>
-    </form>
+    <div class="bs-example bs-example-control-sizing">
+      <form role="form">
+        <div class="controls">
+          <input class="form-control input-lg" type="text" placeholder=".input-lg">
+          <input type="text" class="form-control" placeholder="Default input">
+          <input class="form-control input-sm" type="text" placeholder=".input-sm">
+
+          <select class="form-control input-lg">
+            <option value="">.input-lg</option>
+          </select>
+          <select class="form-control">
+            <option value="">Default select</option>
+          </select>
+          <select class="form-control input-sm">
+            <option value="">.input-sm</option>
+          </select>
+        </div>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <input class="form-control input-lg" type="text" placeholder=".input-lg">
 <input class="form-control" type="text" placeholder="Default input">
@@ -1912,19 +1974,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Column sizing</h3>
     <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
-    <form class="bs-example" style="padding-bottom: 15px;">
-      <div class="row">
-        <div class="col-lg-2">
-          <input type="text" class="form-control" placeholder=".col-lg-2">
-        </div>
-        <div class="col-lg-3">
-          <input type="text" class="form-control" placeholder=".col-lg-3">
-        </div>
-        <div class="col-lg-4">
-          <input type="text" class="form-control" placeholder=".col-lg-4">
+    <div class="bs-example">
+      <form role="form">
+        <div class="row">
+          <div class="col-lg-2">
+            <input type="text" class="form-control" placeholder=".col-lg-2">
+          </div>
+          <div class="col-lg-3">
+            <input type="text" class="form-control" placeholder=".col-lg-3">
+          </div>
+          <div class="col-lg-4">
+            <input type="text" class="form-control" placeholder=".col-lg-4">
+          </div>
         </div>
-      </div>
-    </form>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
   <div class="col-lg-2">
@@ -1941,10 +2005,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-help-text">Help text</h2>
     <p>Block level help text for form controls.</p>
-    <form class="bs-example">
-      <input type="text" class="form-control">
-      <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-    </form>
+    <div class="bs-example">
+      <form role="form">
+        <input type="text" class="form-control">
+        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
+      </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}
@@ -2147,7 +2213,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h1 id="helper-classes">Helper classes</h1>
     </div>
 
-    <h3>Close icon</h3>
+
+    <h3 id="helper-classes-close">Close icon</h3>
     <p>Use the generic close icon for dismissing content like modals and alerts.</p>
     <div class="bs-example">
       <p><button type="button" class="close" aria-hidden="true">&times;</button></p>
@@ -2156,35 +2223,45 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <button type="button" class="close" aria-hidden="true">&times;</button>
 {% endhighlight %}
 
-    <h3>.pull-left</h3>
-    <p>Float an element left with a class. Can also be used as a mixin.</p>
+
+    <h3 id="helper-classes-floats">Quick floats</h3>
+    <p>Float an element to the left or right with a class. Classes can also be used as mixins.</p>
 {% highlight html %}
 <div class="pull-left">...</div>
+<div class="pull-right">...</div>
 {% endhighlight %}
 {% highlight css %}
+// Classes
 .pull-left {
   float: left !important;
 }
-{% endhighlight %}
-
-    <h3>.pull-right</h3>
-    <p>Float an element right with a class. Can also be used as a mixin.</p>
-{% highlight html %}
-<div class="pull-right">...</div>
-{% endhighlight %}
-{% highlight css %}
 .pull-right {
   float: right !important;
 }
+
+// Usage as mixins
+.element {
+  .pull-left();
+}
+.another-element {
+  .pull-right();
+}
 {% endhighlight %}
 
-    <h3>.clearfix</h3>
-    <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. Can also be used as a mixin.</p>
+    <div class="bs-callout bs-callout-warning">
+      <h4>Not for use in navbars</h4>
+      <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
+    </div>
+
+
+    <h3 id="helper-classes-clearfix">Clearfix</h3>
+    <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
 {% highlight html %}
+<!-- Usage as a class -->
 <div class="clearfix">...</div>
 {% endhighlight %}
 {% highlight css %}
-// Mixin
+// Mixin itself
 .clearfix() {
   &:before,
   &:after {
@@ -2196,19 +2273,41 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   }
 }
 
-// Usage
+// Usage as a Mixin
 .element {
   .clearfix();
 }
 {% endhighlight %}
 
-    <h3>.sr-only</h3>
-    <p>Hide an element to all users <em>except</em> screen readers. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>.</p>
+
+    <h3 id="helper-classes-screen-readers">Screen reader content</h3>
+    <p>Hide an element to all users <em>except</em> screen readers with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
 {% highlight html %}
 <a class="sr-only" href="#content">Skip to content</a>
 {% endhighlight %}
+{% highlight css %}
+// Usage as a Mixin
+.skip-navigation {
+  .sr-only();
+}
+{% endhighlight %}
+
+
+    <h3 id="helper-classes-image-replacement">Image replacement</h3>
+    <p>Utilize the <code>.text-hide</code> class or mixin to help replace an element's text content with a background image.</p>
+{% highlight html %}
+<h1 class="text-hide">Custom heading</h1>
+{% endhighlight %}
+  {% highlight css %}
+// Usage as a Mixin
+.heading {
+  .text-hide();
+}
+{% endhighlight %}
   </div>
 
+
+
   <!-- Responsive utilities
   ================================================== -->
   <div class="bs-docs-section" id="responsive-utilities">