Display property

With the display tools, developer can easily and quickly change the display value of components and more. Includes extras for managing display while printing as well as support for some of the more popular values.

How it works #

With the help of our responsive display utility classes, developer may modify the value of the display property. For presentation purposes, here purposefully only support a portion of all potential values. Developer can combine classes for a variety of effects as needed.

Notation #

There is no breakpoint abbreviation in the display utility classes that apply to all breakpoints, from xs to xxl. This is so that a media query is not applied to those classes since they are applied from min-width: 0; and above. However, a breakpoint abbreviation is present for the remaining breakpoints.

As such, the classes are named using the format:

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

Where value is one of:

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

By modifying the display values specified in $utilities and recompiling the SCSS, the display values can be changed.

Media queries have an impact on screen widths that are at or above the specified breakpoint. For instance .none is displayed on lg, xl, and xxl displays by d-lg-none sets.

Examples #

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

RESULT

d-inline

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

RESULT

d-block d-block

Hiding elements #

Use responsive display classes for showing and hiding items based on device to speed up the construction of mobile-friendly websites. Instead of making completely distinct versions of the same website, responsively hide elements.

Use the .d-none class or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation to simply hide components.

You can combine one to have an element appear only on a specific range of screen sizes class .d-*-none with a .d-*-* class, as an illustration.d-none .the d-md-block. .d-xxl-none. With the exception of medium and large devices, d-xxl-none will make the element invisible on all screen sizes.

Screen size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none`
Hidden only on xxl	`.d-xxl-none .d-xxl-block`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block .d-xxl-none`
Visible only on xxl	`.d-none .d-xxl-block`

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

RESULT

hide on lg and wider screens

hide on screens smaller than lg

Display in print #

Our print display utility classes let you alter an element's display value while printing. The same display values as our responsive are supported utilities .d-*.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-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 d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

RESULT

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Hide up to large on screen, but always show on print

Sass #

Utilities API #

Display utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

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