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