Display

Use shorthand display utility classes to quickly change an element's display value.

Notation

Display utility classes can be defined using the format -d-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints

Display utility classes with no breakpoint defined apply to all screen sizes.

Display Class	Value
`-d--none`	`display: none;`
`-d--inline`	`display: inline;`
`-d--inline-block`	`display: inline-block;`
`-d--block`	`display: block;`
`-d--table`	`display: table;`
`-d--table-cell`	`display: table-cell;`
`-d--table-row`	`display: table-row;`
`-d--flex`	`display: flex;`
`-d--inline-flex`	`display: inline-flex;`

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class. As a mobile first framework, it will apply to that specific breakpoint and up.

Display Class	Value
`-d-sm--none`	Hidden only on `sm`
`-d-md--none`	Hidden only on `md`
`-d-lg--none`	Hidden only on `lg`
`-d-xl--none`	Hidden only on `xl`

Special display classes

To target screen readers only or a specific media type (@media screen or @media print), use the below classes.

Display Class	Value
`-sr--only`	Screen reader only
`-d-screen--only`	`display: block;`on @media screen,`display: none;`on @media print.
`-d-print--only`	`display: none;`on @media screen,`display: block;`on @media print.

Examples

-d--none -d-xl--inline-flex

-d-sm--none

-d--inline-flex

-d--flex

<!-- hidden on all breakpoints except xl -->
<div class="-d--none -d-xl--inline-flex"></div>
<!-- hidden on sm breakpoints -->
<div class="-d-sm--none"></div>
<!-- inline-flex on all breakpoints -->
<div class="-d--inline-flex"></div>
<!-- flex on all breakpoints -->
<div class="-d--flex"></div>