Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems

docs/assets/css/bootstrap.css

@@ -4263,6 +4263,58 @@ a.thumbnail:focus {
   list-style: none;
 }
 
+.label {
+  padding: .25em .6em;
+  font-size: 75%;
+  font-weight: 500;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: #999999;
+  border-radius: .25em;
+}
+
+a.label:hover,
+a.label:focus {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.label-danger {
+  background-color: #d9534f;
+}
+
+.label-danger[href] {
+  background-color: #c9302c;
+}
+
+.label-warning {
+  background-color: #f0ad4e;
+}
+
+.label-warning[href] {
+  background-color: #ec971f;
+}
+
+.label-success {
+  background-color: #5cb85c;
+}
+
+.label-success[href] {
+  background-color: #449d44;
+}
+
+.label-info {
+  background-color: #5bc0de;
+}
+
+.label-info[href] {
+  background-color: #31b0d5;
+}
+
 .badge {
   display: inline-block;
   min-width: 10px;

docs/components.html

@@ -28,6 +28,7 @@ title: Components
           <li><a href="#navbar"><i class="glyphicon glyphicon-chevron-right"></i> Navbar</a></li>
           <li><a href="#breadcrumbs"><i class="glyphicon glyphicon-chevron-right"></i> Breadcrumbs</a></li>
           <li><a href="#pagination"><i class="glyphicon glyphicon-chevron-right"></i> Pagination</a></li>
+          <li><a href="#labels"><i class="glyphicon glyphicon-chevron-right"></i> Labels</a></li>
           <li><a href="#badges"><i class="glyphicon glyphicon-chevron-right"></i> Badges</a></li>
           <li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
           <li><a href="#thumbnails"><i class="glyphicon glyphicon-chevron-right"></i> Thumbnails</a></li>
@@ -1274,6 +1275,84 @@ title: Components
 
 
 
+        <!-- Labels
+        ================================================== -->
+        <section id="counters">
+          <div class="page-header">
+            <h1>Labels</h1>
+          </div>
+          <p class="lead"></p>
+
+          <h3>Example</h3>
+          <div class="bs-docs-example">
+            <h1>Example heading <span class="label">New</span></h1>
+            <h2>Example heading <span class="label">New</span></h2>
+            <h3>Example heading <span class="label">New</span></h3>
+            <h4>Example heading <span class="label">New</span></h4>
+            <h5>Example heading <span class="label">New</span></h5>
+            <h6>Example heading <span class="label">New</span></h6>
+          </div>
+{% highlight html linenos %}
+<h3>Example heading <span class="label">New</span></h3>
+{% endhighlight %}
+
+          <h3>Available variations</h3>
+          <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
+          <table class="table table-bordered table-striped">
+            <thead>
+              <tr>
+                <th>Labels</th>
+                <th>Markup</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <span class="label">Default</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-success">Success</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-warning">Warning</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-danger">Danger</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <span class="label label-info">Info</span>
+                </td>
+                <td>
+                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+        </section>
+
+
+
         <!-- Badges
         ================================================== -->
         <section id="badges">

less/bootstrap.less

@@ -49,6 +49,7 @@
 @import "alerts.less";
 @import "thumbnails.less";
 @import "media.less";
+@import "labels.less";
 @import "badges.less";
 @import "progress-bars.less";
 @import "accordion.less";

less/labels.less

@@ -0,0 +1,46 @@
+//
+// Labels
+// --------------------------------------------------
+
+
+// Base classes
+.label {
+  padding: .25em .6em;
+  font-size: 75%;
+  font-weight: 500;
+  color: #fff;
+  line-height: 1;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: @grayLight;
+  border-radius: .25em;
+}
+
+// Hover state, but only for links
+a.label {
+  &:hover,
+  &:focus {
+    color: #fff;
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label {
+  // Danger (red)
+  &-danger            { background-color: @label-danger-background; }
+  &-danger[href]      { background-color: darken(@label-danger-background, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: @label-warning-background; }
+  &-warning[href]     { background-color: darken(@label-warning-background, 10%); }
+  // Success (green)
+  &-success           { background-color: @label-success-background; }
+  &-success[href]     { background-color: darken(@label-success-background, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: @label-info-background; }
+  &-info[href]        { background-color: darken(@label-info-background, 10%); }
+}
+

less/variables.less

@@ -271,6 +271,14 @@
 @popover-arrow-outer-color:   rgba(0,0,0,.25);
 
 
+// Labels
+// -------------------------
+@label-success-background:    @brand-success;
+@label-info-background:       @brand-info;
+@label-warning-background:    @brand-warning;
+@label-danger-background:     @brand-danger;
+
+
 // Modals
 // -------------------------