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
`-d---sr--only--none`	Screen reader only
`-d---d-screen--only--none`	`display: block;`on @media screen, `display: none;`on @media print.
`-d---d-print--only--none`	`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