Sizing
Sizing utilities control width, height, max-width, and max-height using percentage values and semantic size tokens.
Width
Width utilities set the width property to percentage values or semantic tokens. w-auto resets to the intrinsic width.
index.htmlhtml
<div class="border rounded-sm p-2 w-25 mb-3">w-25</div>
<div class="border rounded-sm p-2 w-50 mb-3">w-50</div>
<div class="border rounded-sm p-2 w-75 mb-3">w-75</div>
<div class="border rounded-sm p-2 w-100 mb-3">w-100</div>
<div class="border rounded-sm p-2 w-auto">w-auto</div>w-25
w-50
w-75
w-100
w-auto
Height
Height utilities set the height property as a percentage of the parent. The parent must have an explicit height for percentage values to take effect.
index.htmlhtml
<div class="d-flex gap-3 border rounded-sm p-2 docs-height-container">
<div class="border rounded-sm p-2 h-25">h-25</div>
<div class="border rounded-sm p-2 h-50">h-50</div>
<div class="border rounded-sm p-2 h-75">h-75</div>
<div class="border rounded-sm p-2 h-100">h-100</div>
<div class="border rounded-sm p-2 h-auto">h-auto</div>
</div>h-25
h-50
h-75
h-100
h-auto
Max-width and max-height
mw-100 caps width at 100% of the parent. mh-100 caps height at 100% of the parent.
index.htmlhtml
<div class="border rounded-sm p-2 mw-100 mb-3">mw-100 — never exceeds parent width</div>
<div class="border rounded-sm p-2 mh-100">mh-100 — never exceeds parent height</div>mw-100 — never exceeds parent width
mh-100 — never exceeds parent height
Responsive
Width utilities generate responsive variants: .w-*@sm, .w-*@md, .w-*@lg, .w-*@xl, .w-*@2xl.
index.htmlhtml
<div class="border rounded-sm p-2 w-100 w-50@lg">Full width on mobile, half at lg</div>Full width on mobile, half at lg
Reference
| Class | Property | Responsive |
|---|---|---|
.w-25 | width: 25% | Yes |
.w-50 | width: 50% | Yes |
.w-75 | width: 75% | Yes |
.w-100 | width: 100% | Yes |
.w-auto | width: auto | Yes |
.w-measure | width: var(--measure) | Yes |
.w-contained | width: var(--container) | Yes |
.w-wide | width: var(--container-wide) | Yes |
.h-25 | height: 25% | No |
.h-50 | height: 50% | No |
.h-75 | height: 75% | No |
.h-100 | height: 100% | No |
.h-auto | height: auto | No |
.mw-100 | max-width: 100% | No |
.mh-100 | max-height: 100% | No |