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.

ClassDescription
h-autoheight: auto
h-screenheight: 100vh
h-0height: 0
h-25height: 25%
h-50height: 50%
h-75height: 75%
h-100height: 100%
sizing/height.vue

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.

ClassDescription
w-autowidth: auto
w-0width: 0
w-25width: 25%
w-50width: 50%
w-75width: 75%
w-100width: 100%
sizing/width.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.