Sizing

Width and height utilities for sizing elements relative to their parent or the viewport.

@layer utilities

Relative to the parent

Width utilities (w-25, w-50, w-75, w-100, w-auto) set the element's width as a percentage of its parent. Height utilities (h-25, h-50, h-75, h-100, h-auto) work the same way vertically. Additional values can be generated by modifying the $sizes Sass map.

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

<div class="w-25 p-medium">Width 25%</div>
<div class="w-50 p-medium">Width 50%</div>
<div class="w-75 p-medium">Width 75%</div>
<div class="w-100 p-medium">Width 100%</div>
<div class="w-auto p-medium">Width auto</div>

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

<div style="height: 100px;">
  <div class="h-25 d-inline-block" style="width: 19%;">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 19%;">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 19%;">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 19%;">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 19%;">Height auto</div>
</div>

mw-100 and mh-100 cap an element's width or height at 100% of its parent.

Max-width 100%

<div style="width: 50%; height: 100px;">
  <div class="mw-100" style="width: 200%;">Max-width 100%</div>
</div>

Max-height 100%

<div style="height: 100px;">
  <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>

Relative to the viewport

Viewport-relative utilities set dimensions based on viewport units rather than the parent element.

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

CSS

Sizing utilities are generated via the utilities API.

Reference

The table lists all sizing utilities and their CSS properties.

Class	Properties
`.w-2xsmall`	`width: 1rem;`
`.w-xsmall`	`width: 1.5rem;`
`.w-small`	`width: 2rem;`
`.w-medium`	`width: 2.5rem;`
`.w-large`	`width: 3rem;`
`.w-xlarge`	`width: 3.5rem;`
`.w-2xlarge`	`width: 4rem;`
`.w-25`	`width: 25%;`
`.w-50`	`width: 50%;`
`.w-75`	`width: 75%;`
`.w-100`	`width: 100%;`
`.w-auto`	`width: auto;`
`.h-2xsmall`	`height: 1rem;`
`.h-xsmall`	`height: 1.5rem;`
`.h-small`	`height: 2rem;`
`.h-medium`	`height: 2.5rem;`
`.h-large`	`height: 3rem;`
`.h-xlarge`	`height: 3.5rem;`
`.h-2xlarge`	`height: 4rem;`
`.h-25`	`height: 25%;`
`.h-50`	`height: 50%;`
`.h-75`	`height: 75%;`
`.h-100`	`height: 100%;`
`.h-auto`	`height: auto;`
`.min-w-2xsmall`	`min-width: 1rem;`
`.min-w-xsmall`	`min-width: 1.5rem;`
`.min-w-small`	`min-width: 2rem;`
`.min-w-medium`	`min-width: 2.5rem;`
`.min-w-large`	`min-width: 3rem;`
`.min-w-xlarge`	`min-width: 3.5rem;`
`.min-w-2xlarge`	`min-width: 4rem;`
`.min-w-auto`	`min-width: auto;`
`.min-w-100`	`min-width: 100%;`
`.min-h-2xsmall`	`min-height: 1rem;`
`.min-h-xsmall`	`min-height: 1.5rem;`
`.min-h-small`	`min-height: 2rem;`
`.min-h-medium`	`min-height: 2.5rem;`
`.min-h-large`	`min-height: 3rem;`
`.min-h-xlarge`	`min-height: 3.5rem;`
`.min-h-2xlarge`	`min-height: 4rem;`
`.min-h-auto`	`min-height: auto;`
`.min-h-100`	`min-height: 100%;`
`.max-w-2xsmall`	`max-width: 1rem;`
`.max-w-xsmall`	`max-width: 1.5rem;`
`.max-w-small`	`max-width: 2rem;`
`.max-w-medium`	`max-width: 2.5rem;`
`.max-w-large`	`max-width: 3rem;`
`.max-w-xlarge`	`max-width: 3.5rem;`
`.max-w-2xlarge`	`max-width: 4rem;`
`.max-w-auto`	`max-width: auto;`
`.max-w-100`	`max-width: 100%;`
`.max-h-2xsmall`	`max-height: 1rem;`
`.max-h-xsmall`	`max-height: 1.5rem;`
`.max-h-small`	`max-height: 2rem;`
`.max-h-medium`	`max-height: 2.5rem;`
`.max-h-large`	`max-height: 3rem;`
`.max-h-xlarge`	`max-height: 3.5rem;`
`.max-h-2xlarge`	`max-height: 4rem;`
`.max-h-auto`	`max-height: auto;`
`.max-h-100`	`max-height: 100%;`
`.vw-25`	`width: 25vw;`
`.vw-50`	`width: 50vw;`
`.vw-75`	`width: 75vw;`
`.vw-100`	`width: 100vw;`
`.vh-25`	`height: 25vh;`
`.vh-50`	`height: 50vh;`
`.vh-75`	`height: 75vh;`
`.vh-100`	`height: 100vh;`
`.min-vw-25`	`min-width: 25vw;`
`.min-vw-50`	`min-width: 50vw;`
`.min-vw-75`	`min-width: 75vw;`
`.min-vw-100`	`min-width: 100vw;`
`.min-vh-25`	`min-height: 25vh;`
`.min-vh-50`	`min-height: 50vh;`
`.min-vh-75`	`min-height: 75vh;`
`.min-vh-100`	`min-height: 100vh;`

Utilities API

Sizing utilities are declared in scss/utilities/_sizing.scss using the utilities API.

"width": (
  property: width,
  class: w,
  values: map.merge(
    $sizes,
    (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
  )
),
"height": (
  property: height,
  class: h,
  values: map.merge(
    $sizes,
    (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
  )
),
"min-width": (
  property: min-width,
  class: min-w,
  values: map.merge($sizes, (auto: auto, 100: 100%))
),
"min-height": (
  property: min-height,
  class: min-h,
  values: map.merge($sizes, (auto: auto, 100: 100%))
),
"max-width": (
  property: max-width,
  class: max-w,
  values: map.merge($sizes, (auto: auto, 100: 100%))
),
"max-height": (
  property: max-height,
  class: max-h,
  values: map.merge($sizes, (auto: auto, 100: 100%))
),
"viewport-width": (
  property: width,
  class: vw,
  values: (
    25: 25vw,
    50: 50vw,
    75: 75vw,
    100: 100vw
  )
),
"viewport-height": (
  property: height,
  class: vh,
  values: (
    25: 25vh,
    50: 50vh,
    75: 75vh,
    100: 100vh
  )
),
"min-viewport-width": (
  property: min-width,
  class: min-vw,
  values: (
    25: 25vw,
    50: 50vw,
    75: 75vw,
    100: 100vw
  )
),
"min-viewport-height": (
  property: min-height,
  class: min-vh,
  values: (
    25: 25vh,
    50: 50vh,
    75: 75vh,
    100: 100vh
  )
),
"dynamic-viewport-height": (
  property: height,
  class: dvh,
  values: (
    25: 25dvh,
    50: 50dvh,
    75: 75dvh,
    100: 100dvh
  )
),