Utilities - Sizing
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
25% Width
50% Width
75% Width
100% Width
Auto Width
Height
25% Height
50% Height
75% Height
100% Height
Auto Height
Max Width
100% Max Width
Max Height
100% Max Height
Viewport Relative Sizing
You can also use utilities to set the width and height relative to the viewport.
<div class="_width:100vw">100% Viewport Width</div>
<div class="_height:100vh">100% Viewport Height</div>
<div class="_max-width:100vw">100% Viewport Max Width</div>
<div class="_max-height:100vh">100% Viewport Max Height</div>