How it works

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them.

The classes are named using the following format:

  • ._display-{value}
  • ._display-{breakpoint}-{value}

Where value can be one of:

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

And breakpoint is one of:

  • xs
  • sm
  • md
  • lg
  • xl

The media queries affect screen widths with the given breakpoint. For example, ._display-lg-none sets display: none; on large screens.


Display Inline Utility Example
Display Block Utility Example


Change the display value of elements when printing with the print display utility classes.

  • ._display-print-none
  • ._display-print-inline
  • ._display-print-inline-block
  • ._display-print-block