diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7ab9f58429..b1369c96d8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -443,6 +443,19 @@ section > ul li {
 
 
 
+/* Misc docs stuff
+-------------------------------------------------- */
+
+/* Pseudo :focus state for showing how it looks in the docs */
+input.focused {
+  border-color: rgba(82,168,236,.8);
+  outline: 0;
+  outline: thin dotted \9; /* IE6-9 */
+  -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
+       box-shadow: 0 0 8px rgba(82,168,236,.6);
+}
+
+
 /* Responsive variations
 -------------------------------------------------- */
 
diff --git a/docs/components.html b/docs/components.html
index 76035431a2..1d4db2f8f3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1578,9 +1578,6 @@
           <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>Options</h2>
           <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
           <div class="bs-docs-example">
@@ -1599,51 +1596,28 @@
 </pre>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>Contextual alternatives</h2>
           <p>Add optional classes to change an alert's connotation.</p>
 
-          <h3>Error or danger</h3>
           <div class="bs-docs-example">
             <div class="alert alert-error">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Oh snap!</strong> Change a few things up and try submitting again.
             </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="alert alert-error"&gt;
-  ...
-&lt;/div&gt;
-</pre>
-
-          <h3>Success</h3>
-          <div class="bs-docs-example">
             <div class="alert alert-success">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Well done!</strong> You successfully read this important alert message.
             </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="alert alert-success"&gt;
-  ...
-&lt;/div&gt;
-</pre>
-
-          <h3>Information</h3>
-          <div class="bs-docs-example">
             <div class="alert alert-info">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="alert alert-info"&gt;
-  ...
-&lt;/div&gt;
+&lt;div class="alert alert-error"&gt;... &lt;/div&gt;
+&lt;div class="alert alert-success"&gt;...&lt;/div&gt;
+&lt;div class="alert alert-info"&gt;...&lt;/div&gt;
 </pre>
-
         </section>
 
 
diff --git a/docs/css.html b/docs/css.html
index 97d25136d7..9d215b5bd8 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1590,10 +1590,10 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
           <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...">
+            <input class="focused" id="focusedInput" type="text" value="This is focused...">
           </form>
 <pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
 </pre>
 
           <h3 id="forms-invalid-inputs">Invalid inputs</h3>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 03110beacc..0172ada8a2 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1509,9 +1509,6 @@
           <p>Use the <a href="./javascript.html#alerts">alerts jQuery plugin</a> for quick and easy dismissal of alerts.</p>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>Options</h2>
           <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
           <div class="bs-docs-example">
@@ -1530,51 +1527,28 @@
 </pre>
 
 
-          <hr class="bs-docs-separator">
-
-
           <h2>Contextual alternatives</h2>
           <p>Add optional classes to change an alert's connotation.</p>
 
-          <h3>Error or danger</h3>
           <div class="bs-docs-example">
             <div class="alert alert-error">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Oh snap!</strong> Change a few things up and try submitting again.
             </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="alert alert-error"&gt;
-  ...
-&lt;/div&gt;
-</pre>
-
-          <h3>Success</h3>
-          <div class="bs-docs-example">
             <div class="alert alert-success">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Well done!</strong> You successfully read this important alert message.
             </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="alert alert-success"&gt;
-  ...
-&lt;/div&gt;
-</pre>
-
-          <h3>Information</h3>
-          <div class="bs-docs-example">
             <div class="alert alert-info">
               <button type="button" class="close" data-dismiss="alert">&times;</button>
               <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
             </div>
           </div>
 <pre class="prettyprint linenums">
-&lt;div class="alert alert-info"&gt;
-  ...
-&lt;/div&gt;
+&lt;div class="alert alert-error"&gt;... &lt;/div&gt;
+&lt;div class="alert alert-success"&gt;...&lt;/div&gt;
+&lt;div class="alert alert-info"&gt;...&lt;/div&gt;
 </pre>
-
         </section>
 
 
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 2190d781d3..682bda94bd 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1529,10 +1529,10 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
           <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...">
+            <input class="focused" id="focusedInput" type="text" value="This is focused...">
           </form>
 <pre class="prettyprint linenums">
-&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+&lt;input id="focusedInput" type="text" value="This is focused..."&gt;
 </pre>
 
           <h3 id="forms-invalid-inputs">Invalid inputs</h3>