Sizing

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.

<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.

<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.

<div style="width: 200%;" class="mw-100 p-0_5 border bg-light">100% max-width</div>

<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.

Mixins

No mixins available.