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:

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.

Examples

<div class="_display-inline">Inline</div>
<div class="_display-inline">Inline</div>

<div class="_display-block">Inline Block</div>
<div class="_display-block">Inline Block</div>

Print

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