Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
Display
Responsively control an element's display
property. Also included are some classes to control display
for printing.
Common Utilities
While there is a large number of display
properties available, we only support a handful of the more commonly used ones. Sorry, but we can't support all of them, so if you need one that is not in the list below, you will need to use custom CSS.
Available utilities:
.d-none
setsdisplay: none;
.d-block
setsdisplay: block;
.d-inline
setsdisplay: inline;
.d-table
setsdisplay: table;
.d-table-row
setsdisplay: table-row;
.d-table-cell
setsdisplay: table-cell;
.d-flex
setsdisplay: flex;
.d-inline-flex
setsdisplay: inline-flex;
These classes are also available in responsive variants, in the form of .d{-breakpoint}-{value}
, such as .d-lg-block
. Please refer to how our breakpoint nomenclature is used.
<div class="d-inline bg-success">d-inline</div>
<div class="d-inline bg-success">d-inline</div>
<span class="d-block bg-primary">d-block</span>
<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-inline-block bg-warning">d-inline-block</div>
<div class="d-table bg-info">
d-table
<div class="d-table-row">
<div class="d-table-cell bg-danger">d-table-cell</div>
<div class="d-table-cell bg-danger">d-table-cell</div>
</div>
</div>
Responsively Hiding Content
To ease hiding content across various breakpoints, we also include responsive .d-*-down-none
classes. This should make it easier for those circumstances where resetting the correct display
property on a component for larger breakpoints can be confusing.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
- The
.d-*-none
classes hide the element when the viewport is at the given breakpoint or wider. For example,.d-md-none
hides an element on medium, large, and extra-large viewports. - The
.d-*-down-none
classes hide the element when the viewport is at the given breakpoint or smaller. For example,.d-md-down-none
hides an element on extra-small, small, and medium viewports. - There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
- You can combine one
.d-*-none
class with one.d-*-down-none
class to show an element only on a given interval of screen sizes. For example,.d-sm-down-none.d-xl-none
shows the element only on medium and large viewports. Using multiple.d-*-none
classes or multiple.d-*-down-none
classes is redundant and pointless. - These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
Heads up! There is no .d-*-down-none
class created for the largest breakpoint, .d-xl-down-none
, since it is functionally equivalent to using .d-none
.
Extra small devices Portrait phones (<576px) | Small devices Landscape phones (≥576px - <768px) | Medium devices Tablets (≥768px - <992px) | Large devices Desktops (≥992px - <1200px) | Extra large devices Desktops (≥1200px) | |
---|---|---|---|---|---|
.d-xs-down-none |
Hidden | Visible | Visible | Visible | Visible |
.d-sm-down-none |
Hidden | Hidden | Visible | Visible | Visible |
.d-md-down-none |
Hidden | Hidden | Hidden | Visible | Visible |
.d-lg-down-none |
Hidden | Hidden | Hidden | Hidden | Visible |
.d-none |
Hidden | Hidden | Hidden | Hidden | Hidden |
.d-sm-none |
Visible | Hidden | Hidden | Hidden | Hidden |
.d-md-none |
Visible | Visible | Hidden | Hidden | Hidden |
.d-lg-none |
Visible | Visible | Visible | Hidden | Hidden |
.d-xl-none |
Visible | Visible | Visible | Visible | Hidden |
Test Cases
Resize your browser or load on different devices to test the responsive utility classes.
Green checkmarks indicate the element is visible in your current viewport.
Print Utilities
These utilities only affect the display
property. You will need to take into account any other CSS properties, such as visibility
, that might cause issues for the print layout.
Class | Screen | |
---|---|---|
.print-only-block |
Hidden | Visible (as display: block ) |
.print-only-inline |
Hidden | Visible (as display: inline ) |
.print-only-inline-block |
Hidden | Visible (as display: inline-block ) |
.print-hide |
Visible | Hidden |
.print-show-block |
Any | Visible (as display: block ) |
.print-show-inline |
Any | Visible (as display: inline ) |
.print-show-inline-block |
Any | Visible (as display: inline-block ) |