v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Sizing

Adjust the width or height of an element with sizing utilities.

Page Contents

Relative to the Parent #

Width and height utilities are generated from the $sizes Sass map in _settings.scss. Available values are 25%, 50%, 75%, 100%, and auto by default. You can modify the map values if other values are needed.

Width #

Width utilities use the format .w-{width}, for example .w-25 sets an element to 25% width.

25% width
50% width
75% width
100% width
Auto width
<div class="w-25 p-0_5 border bg-light">25% width</div>
<div class="w-50 p-0_5 border bg-light">50% width</div>
<div class="w-75 p-0_5 border bg-light">75% width</div>
<div class="w-100 p-0_5 border bg-light">100% width</div>
<div class="w-auto p-0_5 border bg-light">Auto width</div>

Height #

Height utilities use the format .h-{height}, for example .h-25 sets an element to 25% height.

25% height
50% height
75% height
100% height
Auto height
<div class="bg-dark" style="height: 100px;">
<div class="h-25 px-0_5 bg-light d-inline-block">25% height</div>
<div class="h-50 px-0_5 bg-light d-inline-block">50% height</div>
<div class="h-75 px-0_5 bg-light d-inline-block">75% height</div>
<div class="h-100 px-0_5 bg-light d-inline-block">100% height</div>
<div class="h-auto px-0_5 bg-light d-inline-block">Auto height</div>
</div>

Max Width/Height #

You can also use the .mw-100 and .mh-100, to set max-width: 100%; or max-height: 100%;, utilities as needed.

100% max-width
<div style="width: 200%;" class="mw-100 p-0_5 border bg-light">100% max-width</div>
100% max-height
<div class="bg-dark" style="height: 100px;">
<div style="height: 200%" class="mh-100 px-0_5 bg-light d-inline-block">100% max-height</div>
</div>

Relative to the Viewport #

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

<div class="min-vw-100">100vw min-width</div>
<div class="min-vh-100">100vh min-height</div>
<div class="vw-100">100vw width</div>
<div class="vh-100">100vh height</div>

SASS Reference #

Variables #

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-sizing boolean true Enable the generation of the sizing utility classes.
$enable-utility-sizing-width boolean true Enable the generation of the width sizing utility classes.
$enable-utility-sizing-height boolean true Enable the generation of the height sizing utility classes.
$enable-utility-sizing-viewport boolean true Enable the generation of the viewport sizing utility classes.

Mixins #

No mixins available.