Sizing
Sizing utility classes are used to modify the dimensions of an element.
Height
Specify the height property of block level elements with a utility class. The following classes are applied using the format .{prefix}-{size} ; where prefix is h and size is the value.
| Class | Description |
|---|---|
| h-auto | height: auto |
| h-screen | height: 100dvh |
| h-0 | height: 0 |
| h-25 | height: 25% |
| h-50 | height: 50% |
| h-75 | height: 75% |
| h-100 | height: 100% |
Width
Specify the width property of block level elements with a utility class. The following classes are applied using the format .{prefix}-{size} ; where prefix is w and size is the value.
| Class | Description |
|---|---|
| w-auto | width: auto |
| w-0 | width: 0 |
| w-25 | width: 25% |
| w-50 | width: 50% |
| w-75 | width: 75% |
| w-100 | width: 100% |
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub