Display utilities

Notation #

The class names for the display utilities come in the following formats:

• .d-{value}
• .d-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

Hiding elements #

The responsive display utility classes can be used to show and hide elements by screen size. This way, sites can be easily made responsive. The following table shows all the scenarios for hiding/showing elements for certain breakpoints:

Display in print #

The display property can also be changed when printing using the print display utility classes. These class names come in the .d-print-{value} format. The {value} can be anything from the first table on this page. You can see a few of these classes in action in the example below.

<!-- Hidden on print -->
<div class="d-print-none">
  Screen only (hide on print only)
</div>

<!-- Displayed only on print -->
<div class="d-none d-print-block">
  Print only (hide on screen only)
</div>

<!-- Displayed always on print, hidden up to large on screen -->
<div class="d-none d-lg-block d-print-block">
  Hide up to large on screen, but always show on print
</div>