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