add [hidden] utility for hiding any html element (see #15274 for more context)

dist/css/bootstrap.css

@@ -4625,7 +4625,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   bottom: -11px;
   left: 50%;
   margin-left: -11px;
-  border-top-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-top-color: rgba(0, 0, 0, .25);
   border-bottom-width: 0;
 }
 .popover.top > .arrow:after {
@@ -4639,7 +4639,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   top: 50%;
   left: -11px;
   margin-top: -11px;
-  border-right-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-right-color: rgba(0, 0, 0, .25);
   border-left-width: 0;
 }
 .popover.right > .arrow:after {
@@ -4654,7 +4654,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   left: 50%;
   margin-left: -11px;
   border-top-width: 0;
-  border-bottom-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-bottom-color: rgba(0, 0, 0, .25);
 }
 .popover.bottom > .arrow:after {
   top: 1px;
@@ -4668,7 +4668,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   right: -11px;
   margin-top: -11px;
   border-right-width: 0;
-  border-left-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-left-color: rgba(0, 0, 0, .25);
 }
 .popover.left > .arrow:after {
   right: 1px;
@@ -4936,6 +4936,10 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   display: block !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 .invisible {
   visibility: hidden;
 }

docs/dist/css/bootstrap.css

@@ -4625,7 +4625,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   bottom: -11px;
   left: 50%;
   margin-left: -11px;
-  border-top-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-top-color: rgba(0, 0, 0, .25);
   border-bottom-width: 0;
 }
 .popover.top > .arrow:after {
@@ -4639,7 +4639,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   top: 50%;
   left: -11px;
   margin-top: -11px;
-  border-right-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-right-color: rgba(0, 0, 0, .25);
   border-left-width: 0;
 }
 .popover.right > .arrow:after {
@@ -4654,7 +4654,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   left: 50%;
   margin-left: -11px;
   border-top-width: 0;
-  border-bottom-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-bottom-color: rgba(0, 0, 0, .25);
 }
 .popover.bottom > .arrow:after {
   top: 1px;
@@ -4668,7 +4668,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   right: -11px;
   margin-top: -11px;
   border-right-width: 0;
-  border-left-color: fadein(rgba(0, 0, 0, .2), 5%);
+  border-left-color: rgba(0, 0, 0, .25);
 }
 .popover.left > .arrow:after {
   right: 1px;
@@ -4936,6 +4936,10 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   display: block !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 .invisible {
   visibility: hidden;
 }

docs/examples/album/index.html

@@ -58,7 +58,7 @@
       </div>
     </section>
 
-    <section class="album text-muted">
+    <div class="album text-muted">
       <div class="container">
 
         <div class="row">
@@ -103,7 +103,7 @@
         </div>
 
       </div>
-    </section>
+    </div>
 
     <footer class="text-muted">
       <div class="container">

scss/_utilities.scss

@@ -51,9 +51,16 @@
 .show {
   display: block !important;
 }
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+  display: none !important;
+}
+
 .invisible {
   visibility: hidden;
 }
+
 .text-hide {
   @include text-hide();
 }