Display property

Overview

Display utilities set the CSS display property. A focused subset of values is supported, and classes can be combined to achieve different effects.

Notation

Display utility classes that apply to all breakpoints, from xssmall to 2xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

• .d-{value} for xs
• .{breakpoint}:d-{value} for sm, md, lg, xl, and 2xl.

Where value is one of:

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

The display values can be altered by changing the display values defined in $utilities and recompiling the SCSS.

The media queries affect screen widths with the given breakpoint or larger. For example, .lg:d-none sets display: none; on lg, xl, and 2xl screens.

Examples

<div class="d-inline p-xs bg-primary fg-contrast">d-inline</div>
<div class="d-inline p-xs bg-neutral fg-contrast">d-inline</div>

<span class="d-block p-xs bg-primary fg-contrast">d-block</span>
<span class="d-block p-xs bg-neutral fg-contrast">d-block</span>

Hiding elements

Responsive display classes control element visibility across breakpoints without requiring separate markup for each screen size.

.d-none hides an element at all breakpoints. Breakpoint-prefixed variants (.sm:d-none, etc.) hide elements at that breakpoint and above.

To show an element only within a range of screen sizes, combine a .d-*-none class with a .d-*-block class. For example, .d-none .md:d-block .xl:d-none makes an element visible only on medium and large screens.

<div class="lg:d-none">hide on lg and wider screens</div>
<div class="d-none lg:d-block">hide on screens smaller than lg</div>

Display in print

Print display utilities override display values within @media print contexts. The same set of values available in responsive utilities is supported.

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

The print and display classes can be combined.

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none lg:d-block d-print-block">Hide up to lg on screen, but always show on print</div>

CSS

Display utilities are generated via the utilities API.

Reference

The table lists all display utilities and their CSS properties.

Utilities API

Display utilities are declared in scss/utilities/_index.scss using the utilities API.

"display": (
  responsive: true,
  print: true,
  dark: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),