Sizing
Definem rapidamente largura e altura de um elemento, em porcentagem ou em unidades de viewport (vw/vh).
Largura e altura (porcentagem)
Seção intitulada “Largura e altura (porcentagem)”| Classe | Propriedade |
|---|---|
.w-50 |
width: 50% |
.w-100 |
width: 100% |
.w-auto |
width: auto |
.max-w-50 |
max-width: 50% |
.max-w-100 |
max-width: 100% |
.min-w-50 |
min-width: 50% |
.min-w-100 |
min-width: 100% |
.h-50 |
height: 50% |
.h-100 |
height: 100% |
.h-auto |
height: auto |
.max-h-50 |
max-height: 50% |
.max-h-100 |
max-height: 100% |
.min-h-50 |
min-height: 50% |
.min-h-100 |
min-height: 100% |
Valores em porcentagem são relativos ao elemento pai — para .h-* funcionar, o pai precisa ter uma altura definida (não auto).
Viewport (vw/vh)
Seção intitulada “Viewport (vw/vh)”Relativos ao tamanho da janela do navegador, independente do elemento pai.
| Classe | Propriedade |
|---|---|
.vw-50 |
width: 50vw |
.vw-100 |
width: 100vw |
.vh-50 |
height: 50vh |
.vh-100 |
height: 100vh |
.min-vw-50 |
min-width: 50vw |
.min-vw-100 |
min-width: 100vw |
.min-vh-50 |
min-height: 50vh |
.min-vh-100 |
min-height: 100vh |
.max-vw-50 |
max-width: 50vw |
.max-vw-100 |
max-width: 100vw |
.max-vh-50 |
max-height: 50vh |
.max-vh-100 |
max-height: 100vh |
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 |