Utilities - Sizing
Sizing Utilities
Easily make an element as wide or as tall (relative to its parent) with these width and height utilities.
Width
| Class |
Properties |
w-1 |
width: 1%; |
w-20 |
width: 20%; |
w-25, width-quarter |
width: 25%; |
width-third |
width: 33.33%; |
w-50, width-half |
width: 50%; |
w-75 |
width: 75%; |
w-100, width-full |
width: 100%; |
w-auto |
width: auto; |
Height
| Class |
Properties |
h-25 |
height: 25%; |
h-50 |
height: 50%; |
h-75 |
height: 75%; |
h-100 |
height: 100%; |
h-auto |
height: auto; |
Minimum/Maximum
| Class |
Properties |
mw-100 |
max-width: 100%; |
mh-100 |
max-height: 100%; |
min-w-0 |
min-width: 0; |
Based on Viewport Size
| Class |
Properties |
min-vw-100 |
min-width: 100vw; |
min-vh-100 |
min-height: 100vh; |
vw-100 |
width: 100vh; |
vh-100 |
height: 100vh; |