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--nonedisplay: none;
-d--inlinedisplay: inline;
-d--inline-blockdisplay: inline-block;
-d--blockdisplay: block;
-d--tabledisplay: table;
-d--table-celldisplay: table-cell;
-d--table-rowdisplay: table-row;
-d--flexdisplay: flex;
-d--inline-flexdisplay: 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--noneHidden only on sm
-d-md--noneHidden only on md
-d-lg--noneHidden only on lg
-d-xl--noneHidden 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--onlyScreen 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>