Configurable display utility classes (#27917)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 205bb327ae0fa22cd7c5e21dc0c363b8b6add25d..acb7ae08143b1ff377158408b6bf2a6a4bcbd115 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1090,6 +1090,7 @@ $pre-scrollable-max-height:         340px !default;
 
 // Utilities
 
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
 $overflows: auto, hidden !default;
 $positions: static, relative, absolute, fixed, sticky !default;
 

diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index 20aeeb5f3e7586bba0fe69bff02057b15b2309f3..130367998fec2ff269df68a152d12e93c09d9d36 100644 (file)
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -8,15 +8,9 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .d#{$infix}-none         { display: none !important; }
-    .d#{$infix}-inline       { display: inline !important; }
-    .d#{$infix}-inline-block { display: inline-block !important; }
-    .d#{$infix}-block        { display: block !important; }
-    .d#{$infix}-table        { display: table !important; }
-    .d#{$infix}-table-row    { display: table-row !important; }
-    .d#{$infix}-table-cell   { display: table-cell !important; }
-    .d#{$infix}-flex         { display: flex !important; }
-    .d#{$infix}-inline-flex  { display: inline-flex !important; }
+    @each $value in $displays {
+      .d#{$infix}-#{$value} { display: $value !important; }
+    }
   }
 }
 
@@ -26,13 +20,7 @@
 //
 
 @media print {
-  .d-print-none         { display: none !important; }
-  .d-print-inline       { display: inline !important; }
-  .d-print-inline-block { display: inline-block !important; }
-  .d-print-block        { display: block !important; }
-  .d-print-table        { display: table !important; }
-  .d-print-table-row    { display: table-row !important; }
-  .d-print-table-cell   { display: table-cell !important; }
-  .d-print-flex         { display: flex !important; }
-  .d-print-inline-flex  { display: inline-flex !important; }
+  @each $value in $displays {
+    .d-print-#{$value} { display: $value !important; }
+  }
 }

diff --git a/site/docs/4.2/utilities/display.md b/site/docs/4.2/utilities/display.md
index ab77ddc9125f026aa5e81f79485ad19a44802d1f..8dafce2d8920eae0df024ad349f1578a2a5da3a3 100644 (file)
--- a/site/docs/4.2/utilities/display.md
+++ b/site/docs/4.2/utilities/display.md
@@ -31,6 +31,8 @@ Where *value* is one of:
 * `flex`
 * `inline-flex`
 
+The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
+
 The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.
 
 ## Examples