Display
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>