Display & Visibility
Learn the available Utilities to control the display and the visibility of elements
Display Utilities
in the table below you can find a list of shorthand display properties class names to show/hide or in specific display type.
| Cheat | Description | Markup |
|---|---|---|
| adding display: inline-block to the element | <any> |
.display-block | adding display: block to the element | <any> |
.display-flex | adding display: flex to the element | <any> |
.display-grid | adding display: grid to the element | <any> |
.display- | add display # from a specific screen breakpoint and up. | <any> |
.hidden | hide the element. | <any> |
| hide the element from the responsive breakpoint and up | <any> |
| hide the element from the responsive breakpoint and down | <any> |
Visibility Utilities
in the table below you can find a list of shorthand visibilityvisual
| Cheat | Description | Markup |
|---|---|---|
| making the element visually hidden for screen readers. | <any> |
.visibility-hidden | adding visibility: hidden to the element | <any> |
.visibility-visible | adding visibility: visible to the element | <any> |
.visibility-collapse | adding visibility: collapse to the element | <any> |
.visibility-{breakpoint}-* | add visibility # from a specific screen breakpoint and up. | <any> |