diff --git a/scss/_variables.scss b/scss/_variables.scss index 205bb327ae..acb7ae0814 100644 --- 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 20aeeb5f3e..130367998f 100644 --- 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 ab77ddc912..8dafce2d89 100644 --- 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