Utilities - Display

Change the display style of components responsively with display utilities.

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}
  • ._{breakpoint}:display:{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
  • xxl

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

Inline
Inline
<div class="_display:inline _background:primary">Inline</div>
<div class="_display:inline _background:dark">Inline</div>

Block
Block
<div class="_display:block _background:primary">Block</div>
<div class="_display:block _background:dark">Block</div>

Print

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

  • ._print:display:none
  • ._print:display:inline
  • ._print:display:inline-block
  • ._print:display:block