Display

Overview

Responsively control an element's display property. Also included are some classes to control display for printing.

Notation

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 sets display: none;
• .d-block sets display: block;
• .d-flex sets display: flex;
• .d-inline sets display: inline;
• .d-inline-block sets display: inline-block;
• .d-inline-flex sets display: inline-flex;
• .d-table sets display: table;
• .d-table-row sets display: table-row;
• .d-table-cell sets display: table-cell;

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.

Examples

<div class="d-inline p-0_5 bg-primary text-white">d-inline</div>
<div class="d-inline p-0_5 bg-secondary text-white">d-inline</div>

<div class="d-block p-0_5 bg-primary text-white">d-block</div>
<div class="d-block p-0_5 bg-secondary text-white">d-block</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.

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. Includes support for the same display values as our responsive .d-* utilities.

You will need to take into account any other CSS properties, such as visibility, that might cause issues for the print layout.

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

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Mixins

No mixins available.