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;