Fixes #5775: Collapse labels/badges

* When :empty, display: none; * Add documentation for change in behavior
twbs · Nov 3, 2012 · ead5dbe · ead5dbe
1 parent fc42ac6
commit ead5dbe
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -5427,6 +5427,11 @@ a.thumbnail:hover {
           border-radius: 9px;
 }
 
+.label:empty,
+.badge:empty {
+  display: none;
+}
+
 a.label:hover,
 a.badge:hover {
   color: #ffffff;

diff --git a/docs/components.html b/docs/components.html
@@ -1859,6 +1859,9 @@ <h3>Badges</h3>
             </tbody>
           </table>
 
+          <h3>Easily collapsible</h3>
+          <p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
+
         </section>
 
 

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
@@ -1788,6 +1788,9 @@
             </tbody>
           </table>
 
+          <h3>{{_i}}Easily collapsible{{/i}}</h3>
+          <p>{{_i}}For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.{{/i}}</p>
+
         </section>
 
 

diff --git a/less/labels-badges.less b/less/labels-badges.less
@@ -27,6 +27,14 @@
   .border-radius(9px);
 }
 
+// Empty labels/badges collapse
+.label,
+.badge {
+  &:empty {
+    display: none;
+  }
+}
+
 // Hover state, but only for links
 a {
   &.label:hover,