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.
Class | Value | Result |
---|
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
<!-- 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>