Display
Display classes #
Display property utility classes:
| CSS Class | Description |
|---|---|
b{p}lock |
display: block; |
f{p}lex |
display: flex; |
i{p}nline-block |
display: inline-block; |
i{p}nline-flex |
display: inline-flex; |
i{p}nline |
display: inline; |
c{p}ontents |
display: contents; |
c{p}ss-grid |
display: grid; |
c{p}ss-inline-grid |
display: inline-grid; |
h{p}ide |
display: none; |
Responsive - target a breakpoint by adding the @{breakpoint} suffix (e.g., .hide@md).
Display at breakpoint #
Display an element at a specific breakpoint using the display@{breakpoint} classes.
Example:
<ul>
<li class="flex display@sm"></li>
<!-- ↑ element visible from breakpoint 'sm', with display: flex -->
</ul>.is-hidden & .is-visible #
These two classes are particularly helpful to hide/show elements in JavaScript. Unlike the 'standard' display classes, they include the !important rule.
| CSS Class | Description |
|---|---|
i{p}s-hidden |
display: none !important; |
i{p}s-visible |
display: var(--display, block) !important; |
Print #
Modify an element appearance if the page is printed:
| CSS Class | Description |
|---|---|
p{p}rint:hide |
hide an element if the page is printed |
p{p}rint:shadow-none |
remove box-shadow if the page is printed |
