Utilitário
Display
Classes para a propriedade display, alternância visual via JS e ajustes para impressão.
Classes
| Classe CSS | Descrição |
|---|---|
.block | display: block; |
.flex | display: flex; |
.inline-block | display: inline-block; |
.inline-flex | display: inline-flex; |
.inline | display: inline; |
.contents | display: contents; |
.css-grid | display: grid; |
.css-inline-grid | display: inline-grid; |
.hide | display: none; |
Responsivo: adicione o sufixo
@{breakpoint} à classe — por exemplo,
.hide@md.
Display em um breakpoint específico
Use as classes display@{breakpoint} para tornar um
elemento visível a partir de um breakpoint específico:
<ul>
<li class="flex display@sm"></li>
<!-- ↑ visível a partir do breakpoint 'sm', com display: flex -->
</ul>.is-hidden & .is-visible
Especialmente úteis para alternar visibilidade via JavaScript. Diferente
das classes "padrão", incluem !important.
| Classe CSS | Descrição |
|---|---|
.is-hidden | display: none !important; |
.is-visible | display: var(--display, block) !important; |
Modifique a aparência de um elemento quando a página é impressa:
| Classe CSS | Descrição |
|---|---|
.print:hide | esconde o elemento ao imprimir a página |
.print:shadow-none | remove o box-shadow ao imprimir a página |