Utilitário
Width
Define a largura de um elemento, com escala em rem e em porcentagem/viewport.
Classes
| Classe CSS | Descrição |
|---|---|
.width-4xs | width: 0.25rem; (4px) |
.width-3xs | width: 0.5rem; (8px) |
.width-2xs | width: 0.75rem; (12px) |
.width-xs | width: 1rem; (16px) |
.width-sm | width: 1.5rem; (24px) |
.width-md | width: 2rem; (32px) |
.width-lg | width: 3rem; (48px) |
.width-xl | width: 4rem; (64px) |
.width-2xl | width: 6rem; (96px) |
.width-3xl | width: 8rem; (128px) |
.width-4xl | width: 16rem; (256px) |
.width-0 | width: 0; |
.width-10% | width: 10%; |
.width-20% | width: 20%; |
.width-25% | width: 25%; |
.width-30% | width: 30%; |
.width-33% | width: calc(100% / 3); |
.width-40% | width: 40%; |
.width-50% | width: 50%; |
.width-60% | width: 60%; |
.width-66% | width: calc(100% / 1.5); |
.width-70% | width: 70%; |
.width-75% | width: 75%; |
.width-80% | width: 80%; |
.width-90% | width: 90%; |
.width-100% | width: 100%; |
.width-100vw | width: 100vw; |
.width-auto | width: auto; |
.width-inherit | width: inherit; |
Responsivo
Para mirar um breakpoint, adicione o sufixo @{breakpoint}
— por exemplo, .width-sm@md.