Display helpers

The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.


Material Design Breakpoints
DeviceCodeTypeRange
Extra smallxsSmall to large phone< 600px
SmallsmSmall to medium tablet600px > < 960px
MediummdLarge tablet to laptop960px > < 1280px
LargelgLaptop to desktop1280px > < 1920px
Extra largexl1080p to 1440p desktop1920px > < 2560px
Extra extra largexxl4k and ultra-wide> 2560px
Specification

Display

Specify the element’s display property. These classes can be applied to all breakpoints from xs to xxl. When using a base class,.d-{value}, it is inferred to be .d-xs-{value}.

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

The value property is one of:

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

When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up. For example, d-lg-flex will apply to lg, xl and xxl size screens.

Visibility

Conditionally display an element based upon the current viewport. Breakpoint utility classes always apply from the bottom up. That means if you have .d-none, it will apply to all breakpoints. However, .d-md-none will apply to only md and up.

Screen sizeClass
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-flex
Hidden only on sm.d-sm-none .d-md-flex
Hidden only on md.d-md-none .d-lg-flex
Hidden only on lg.d-lg-none .d-xl-flex
Hidden only on xl.d-xl-none .d-xxl-flex
Hidden only on xxl.d-xxl-none
Visible on all.d-flex
Visible only on xs.d-flex .d-sm-none
Visible only on sm.d-none .d-sm-flex .d-md-none
Visible only on md.d-none .d-md-flex .d-lg-none
Visible only on lg.d-none .d-lg-flex .d-xl-none
Visible only on xl.d-none .d-xl-flex .d-xxl-none
Visible only on xxl.d-none .d-xxl-flex

Alternatively you can hide an element based upon the current viewport using lateral display helper classes. These classes can be applied using the following format hidden-{breakpoint}-{condition?}

The condition applies the class base on:

  • nothing - hide the element only on the specified breakpoint
  • and-down - hide the element on the specified breakpoint and down - sm through xl only
  • and-up - hide the element on the specified breakpoint and up - sm through xl only

hidden-{breakpoint}-and-up is equivalent to d-{breakpoint}-none.

Media types can also be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.

Caveats

Display in print

You can also change the display property when printing.

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

Print utility classes can also be combined with none print display utilities.

Accessibility

Screen readers

Use the d-sr utility classes to conditionally hide content on all devices except screen readers.

  • d-sr-only visually hides elements but will still announce to screen readers.
  • d-sr-only-focusable visually hides an element until it is focused. This is useful when implementing skip links.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub