Learn the available Utilities to control the display and the visibility of elements
in the table below you can find a list of shorthand display properties class names to show/hide or in specific display types.
| Cheat | Description | Markup |
|---|---|---|
.inline-block |
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-{breakpoint}-* |
add display # from a specific screen breakpoint and up. | <any> |
.hidden |
hide the element. | <any> |
.hidden-{breakpoint}-up |
hide the element from the responsive breakpoint and up | <any> |
.hidden-{breakpoint}-down |
hide the element from the responsive breakpoint and down | <any> |
in the table below you can find a list of shorthand visibility properties class names to show/hide on the visual level without affecting its position and space.
| Cheat | Description | Markup |
|---|---|---|
.visually-hidden |
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> |