Tighten up badges docs; less bottom margin on h3

1 files changed, 37 insertions, 1 deletions

diff --git a/docs/components.html b/docs/components.html
index 6710e8338..b88e54b88 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1342,13 +1342,49 @@
             <h1>Counters</h1>
           </div>
 
+          <h3>Basic usage</h3>
+          <p>Counters are used to indicator unread or new items. Add a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
           <div class="bs-docs-example">
             <a href="#">Inbox</a> <span class="counter">42</span>
           </div>
-
 <pre class="prettyprint linenums">
 &lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
 </pre>
+
+          <p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
+          <div class="bs-docs-example">
+            <ul class="nav nav-pills">
+              <li class="active"><a href="#">Home <span class="counter">42</span></a></li>
+              <li><a href="#">Profile</a></li>
+              <li><a href="#">Messages <span class="counter">3</span></a></li>
+            </ul>
+            <br>
+            <ul class="nav nav-list" style="max-width: 260px;">
+              <li class="active">
+                <a href="#">
+                  <span class="counter pull-right">42</span>
+                  Home
+                </a>
+              </li>
+              <li><a href="#">Profile</a></li>
+              <li>
+                <a href="#">
+                  <span class="counter pull-right">3</span>
+                  Messages
+                </a>
+              </li>
+            </ul>
+          </div>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-list"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
           <h3>Easily collapsible</h3>
           <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>