CSS Display

Example

<div class="d-block mt-3">
  <div class="d-inline p-2 bg-navy text-white mt-2">d-inline</div>
  <div class="d-inline p-2 bg-gray">d-inline</div>
  <div class="d-block p-2 bg-navy text-white mt-3">d-block</div>
  <div class="d-block p-2 bg-gray">d-block</div>
</div>

The display utility classes that are relevant to all breakpoints between xs and xl don't have a breakpoint abbreviation in them, because they're applied from min-width: 0; on up—therefore, they're not bound by a media query. The rest of the breakpoints have a breakpoint abbreviation. That's why the class is named .d-{value} for xs.

Where value is one of:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

The media queries impact screen widths that are the size of the given breakpoint or larger than it. That's why .d-lg-none sets display: none; on lg and xl screens.

Screen sizing

• Screen widths with the specified breakpoint and larger will be impacted by the media queries. For example, .d-lg-none sets display: none; on both lg and xl screens.
• When developing for mobile displays, use display classes that show elements depending on the device that the user is on. Make sure to design device-specific sites that hide elements responsively depending on the user's screen size.
• Hide elements by using the .d-none class or any of the .d-{sm, md, lg, xl}-none classes.
• Show an element only on select screen sizes by combining a .d-*-none class with a .d-*-* class. For example, .d-none .d-md-block .d-xl-none hides the element for every screen size, save for medium and large devices.

Print

You can also change an element's display utilities when you use print display utility classes. This has the same support for display values as the .d-* utilities.

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-cell
• .d-print-table-row
• .d-print-flex
• .d-print-inline-flex

You can combine print and display classes.

<!-- Screen only, do not print -->
<div class="d-print-none"> ... </div>
<!-- Print only, hide on screen -->
<div class="d-none d-print-block"> ... </div>
<!-- Hide up to large on screen, but always show on print -->
<div class="d-none d-lg-block d-print-block"> ... </div>