Fixes #5775: Collapse labels/badges

* When :empty, display: none;
* Add documentation for change in behavior

4 files changed, 19 insertions, 0 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 142df455a..83c9bec75 100644
--- 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
index 1874470f4..a99a96b9b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1859,6 +1859,9 @@
             </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
index 3c024451c..0a655d6de 100644
--- 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
index d118a0190..9c3a40bfb 100644
--- 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,