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 2xlarge, 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 xsmall
• .{breakpoint}:d-{value} for small, medium, large, xlarge, and 2xlarge.

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, .large:d-none sets display: none; on large, xlarge, and 2xlarge screens.

Examples

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

<span class="d-block p-xsmall bg-primary fg-contrast">d-block</span>
<span class="d-block p-xsmall 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 (.small: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 .medium:d-block .xlarge:d-none makes an element visible only on medium and large screens.

<div class="large:d-none">hide on large and wider screens</div>
<div class="d-none large:d-block">hide on screens smaller than large</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 large:d-block d-print-block">Hide up to large 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
),