Tighten up badges docs; less bottom margin on h3

5 files changed, 108 insertions, 18 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a78ab929a..47396530a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -425,13 +425,13 @@ h6 small {
 }
 
 h1,
-h2,
-h3 {
+h2 {
   margin-top: 20px;
   margin-bottom: 10px;
   line-height: 40px;
 }
 
+h3,
 h4,
 h5,
 h6 {
@@ -4006,15 +4006,14 @@ a.thumbnail:hover {
 .counter {
   display: inline-block;
   min-width: 10px;
-  padding: 2px 7px;
-  font-size: 11.844px;
+  padding: 3px 7px;
+  font-size: 12px;
   font-weight: bold;
-  line-height: 14px;
+  line-height: 1;
   color: #fff;
   text-align: center;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   white-space: nowrap;
-  vertical-align: baseline;
+  vertical-align: middle;
   background-color: #999999;
   border-radius: 10px;
 }
@@ -4038,6 +4037,16 @@ a.counter:hover {
   top: 0;
 }
 
+.nav-list > .active > a > .counter,
+.nav-pills > .active > a > .counter {
+  color: #428bca;
+  background-color: #fff;
+}
+
+.nav-pills > li > a > .counter {
+  margin-left: 3px;
+}
+
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 40px 0;
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>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 4b1b005bd..bbaae5f1a 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1271,13 +1271,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>
 
diff --git a/less/counters.less b/less/counters.less
index 6f9cc00fc..fc45fa2a6 100644
--- a/less/counters.less
+++ b/less/counters.less
@@ -6,18 +6,17 @@
 // Base classes
 .counter {
   display: inline-block;
-  padding: 2px 7px;
-  font-size: @font-size-base * .846;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: 12px;
   font-weight: bold;
-  line-height: 14px; // ensure proper line-height if floated
   color: #fff;
-  vertical-align: baseline;
+  line-height: 1;
+  vertical-align: middle;
   white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  text-align: center;
   background-color: @grayLight;
   border-radius: 10px;
-  min-width: 10px;
-  text-align: center;
 
   // Empty labels/badges collapse
   &:empty {
@@ -46,3 +45,13 @@ a.counter {
     top: 0;
   }
 }
+
+// Account for counters in navs
+.nav-list > .active > a > .counter,
+.nav-pills > .active > a > .counter {
+  color: @link-color;
+  background-color: #fff;
+}
+.nav-pills > li > a > .counter {
+  margin-left: 3px;
+}
diff --git a/less/type.less b/less/type.less
index 563cee42e..29062be48 100644
--- a/less/type.less
+++ b/less/type.less
@@ -65,12 +65,12 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1,
-h2,
-h3 {
+h2 {
   margin-top: @line-height-base;
   margin-bottom: @line-height-base / 2;
   line-height: @line-height-base * 2;
 }
+h3,
 h4,
 h5,
 h6 {