Overflow
Controlam o que acontece quando o conteúdo de um elemento ultrapassa suas dimensões: cortar, mostrar scroll ou deixar vazar.
| Classe | overflow aplicado |
|---|---|
.overflow-auto |
auto — mostra a barra de scroll só quando o conteúdo excede o espaço disponível |
.overflow-hidden |
hidden — corta o conteúdo excedente, sem scroll |
.overflow-visible |
visible — deixa o conteúdo vazar para fora da caixa (comportamento padrão do navegador) |
.overflow-scroll |
scroll — sempre mostra a barra de scroll, mesmo sem excesso de conteúdo |
.overflow-clip |
clip — corta o excesso sem permitir scroll algum (mais previsível/performático que hidden em alguns casos) |
Por eixo
Seção intitulada “Por eixo”Cada valor acima também existe isolado por eixo, trocando a propriedade de overflow para overflow-x ou overflow-y:
.overflow-x-{valor}— ex.:.overflow-x-auto,.overflow-x-hidden,.overflow-x-scroll..overflow-y-{valor}— ex.:.overflow-y-auto,.overflow-y-hidden,.overflow-y-scroll.
Quando usar: .overflow-hidden/.overflow-clip para truncar conteúdo (junto com .text-ellipsis, por exemplo); .overflow-auto/.overflow-y-auto para áreas com altura fixa e lista longa dentro (menus, cards, modais); .overflow-x-auto para tabelas/tabs que precisam rolar horizontalmente em telas estreitas.
Breakpoints responsivos
Seção intitulada “Breakpoints responsivos”A maioria dos utilitários abaixo aceita um infixo de breakpoint no meio do nome da classe: .{prefixo}-{breakpoint}-{valor} (ex.: .d-md-none, .text-lg-center, .gap-xl--lg). O breakpoint funciona mobile-first: a classe vale a partir da largura mínima indicada até o próximo breakpoint.
| Breakpoint | Infixo | Largura mínima |
|---|---|---|
| Extra small | (nenhum, classe base) | 0 |
| Small | sm |
576px |
| Medium | md |
768px |
| Large | lg |
992px |
| Extra large | xl |
1200px |
| Extra extra extra large | xxxl |
1920px |