Sizing Utilities

Make an element as wide or as tall as you need using width and height utilities.

Width and height utilities provide support for 25%, 50%, 75%, 100%, and auto by default.

Width

Width Utility Example

Height

Height Utility Example

Max Width

Max Width Utility Example

Max Height

Max Height Utility Example

Viewport Relative Sizing

You can also use utilities to set the width and height relative to the viewport.

<div class="_vw-100">100% Viewport Width</div>
<div class="_vh-100">100% Viewport Height</div>
<div class="_max-vw-100">100% Max Viewport Width</div>
<div class="_max-vh-100">100% Max Viewport Height</div>