Sizing utilities set width and height as a percentage of the parent (w-25 to w-100, h-25 to h-100, plus w-auto and h-auto), cap them with mw-100 and mh-100, or relate them to the viewport with vw-100, vh-100, min-vw-100 and min-vh-100.
1Width percentages
w-25, w-50, w-75, w-100 and w-auto relative to the parent.
w-25w-50w-75w-100w-auto<div class="grid gap-2 bg-surface-3 rounded-lg p-2">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small w-1/4">
<code class="small">w-25</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small w-1/2">
<code class="small">w-50</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small w-3/4">
<code class="small">w-75</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small w-full">
<code class="small">w-100</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small w-auto">
<code class="small">w-auto</code>
</div>
</div>2Height percentages
h-25 to h-100 relative to a parent with a fixed height.
h-25h-50h-75h-100h-auto<div class="flex items-start gap-2 bg-surface-3 rounded-lg p-2" style="height:160px">
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small h-1/4">
<code class="small">h-25</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small h-1/2">
<code class="small">h-50</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small h-3/4">
<code class="small">h-75</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small h-full">
<code class="small">h-100</code>
</div>
<div class="bg-primary-subtle border border-primary/30 rounded-md p-2 small h-auto">
<code class="small">h-auto</code>
</div>
</div>3Max width 100
mw-100 keeps a wide element from overflowing its parent.
mw-100 on a 900px wide image<div class="bg-surface-3 rounded-lg p-2" style="max-width:22rem">
<img src="https://images.unsplash.com/photo-1580418835996-7783da1c3c6c?auto=format&fit=crop&w=1600&h=700&q=70" alt="Our guide to gifts under $50" width="900" class="max-w-full h-auto rounded-lg block">
<div class="small mt-1">
<code>mw-100</code> on a 900px wide image
</div>
</div>4Max height 100
mh-100 limits a child to the height of its parent.
mh-100 keeps the 300px image inside the 120px box.<div class="bg-surface-3 rounded-lg p-2 flex gap-2" style="height:120px">
<img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?auto=format&fit=crop&w=800&h=800&q=70" alt="How to choose the right product" width="300" height="300" class="max-h-full w-auto rounded-lg">
<div class="small">
<code>mh-100</code> keeps the 300px image inside the 120px box.
</div>
</div>5Full width button
w-100 turns a button into a block that fills its column.
Hand cream
$61.73
<div class="border rounded-lg p-4" style="max-width:20rem">
<div class="font-semibold">
Hand cream
</div>
<div class="small text-muted mb-4">
$61.73
</div>
<button type="button" class="btn btn-primary w-full">Add to cart</button>
</div>6Progress bars with widths
Width utilities on the inner bar of a meter.
Sustainable materials25%
Member prices50%
Easy exchanges75%
<div class="grid gap-2 small">
<div>
<div class="flex justify-between">
<span>Sustainable materials</span><span>25%</span>
</div>
<div class="bg-surface-2 rounded-full" style="height:6px">
<div class="bg-danger rounded-full h-full w-1/4">
</div>
</div>
</div>
<div>
<div class="flex justify-between">
<span>Member prices</span><span>50%</span>
</div>
<div class="bg-surface-2 rounded-full" style="height:6px">
<div class="bg-warning rounded-full h-full w-1/2">
</div>
</div>
</div>
<div>
<div class="flex justify-between">
<span>Easy exchanges</span><span>75%</span>
</div>
<div class="bg-surface-2 rounded-full" style="height:6px">
<div class="bg-success rounded-full h-full w-3/4">
</div>
</div>
</div>
</div>7Equal height cards
h-100 on cards inside a row makes every card as tall as the tallest.
Reliable process elegant
We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.
We keep things simple, so you can focus on what matters to you.
<div class="row g-2">
<div class="col-4">
<div class="border rounded-lg p-2 h-full small">
Reliable process elegant
</div>
</div>
<div class="col-4">
<div class="border rounded-lg p-2 h-full small">
We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.
</div>
</div>
<div class="col-4">
<div class="border rounded-lg p-2 h-full small">
We keep things simple, so you can focus on what matters to you.
</div>
</div>
</div>8Half width on desktop only
w-100 on phones; the grid column col-md-6 does the narrowing from md, so the form stays readable.
<div class="row">
<div class="col-md-6">
<label class="form-label" for="ut-coupon-1256">Coupon code</label>
<input id="ut-coupon-1256" type="text" class="form-control w-full" placeholder="SAVE20">
</div>
</div>9Full height split
Two panes with h-100 inside a fixed height container.
w-25 h-100
w-75 h-100
<div class="flex gap-2" style="height:140px">
<div class="w-1/4 h-full bg-surface-2 rounded-lg p-2 small">
w-25 h-100
</div>
<div class="w-3/4 h-full bg-surface-3 border rounded-lg p-2 small">
w-75 h-100
</div>
</div>10Viewport units (preview)
vw-100, vh-100, min-vw-100 and min-vh-100 size elements to the viewport; shown here as a reference table.
| Class | Sets | Typical use |
|---|---|---|
vh-100 | height: 100vh | full screen hero |
min-vh-100 | min-height: 100vh | sticky footer layout |
vw-100 | width: 100vw | edge to edge strip |
min-vw-100 | min-width: 100vw | wide canvas |
<table class="table table-sm small mb-0">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Sets</th>
<th scope="col">Typical use</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>vh-100</code></td>
<td>height: 100vh</td>
<td>full screen hero</td>
</tr>
<tr>
<td><code>min-vh-100</code></td>
<td>min-height: 100vh</td>
<td>sticky footer layout</td>
</tr>
<tr>
<td><code>vw-100</code></td>
<td>width: 100vw</td>
<td>edge to edge strip</td>
</tr>
<tr>
<td><code>min-vw-100</code></td>
<td>min-width: 100vw</td>
<td>wide canvas</td>
</tr>
</tbody>
</table>11Auto width in flex
w-auto lets an input shrink to its content inside a flex row.
<div class="flex items-center gap-2">
<label class="small" for="ut-rows-1257">Rows per page</label>
<select id="ut-rows-1257" class="form-select form-select-sm w-auto">
<option>10</option>
<option>25</option>
<option>50</option>
</select>
</div>12Image fills its column
w-100 on an image makes it scale to the column width.
<div class="row g-2">
<div class="col-6">
<img src="https://images.unsplash.com/photo-1567401893414-76b7b1e5a7a5?auto=format&fit=crop&w=1200&h=800&q=70" alt="The small habits that make a big difference" class="w-full rounded-lg">
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1567958451986-2de427a4a0be?auto=format&fit=crop&w=1200&h=800&q=70" alt="What to pack for a rainy weekend outdoors" class="w-full rounded-lg">
</div>
</div>13Half width centred
w-50 with mx-auto centres a narrow block.
w-50 mx-auto
<div class="bg-surface-3 rounded-lg p-4">
<div class="w-1/2 mx-auto bg-page border rounded-lg p-2 text-center small">
w-50 mx-auto
</div>
</div>14Stat bars
Horizontal bars with width utilities compare four values.
- Kenji
- Jonah
- Kenji
- Chloe
<ul class="list-unstyled mb-0 grid gap-1 small">
<li class="flex items-center gap-2"><span style="width:5rem">Kenji</span><span class="bg-primary rounded-sm w-full" style="height:12px"></span></li>
<li class="flex items-center gap-2"><span style="width:5rem">Jonah</span><span class="bg-primary rounded-sm w-3/4" style="height:12px"></span></li>
<li class="flex items-center gap-2"><span style="width:5rem">Kenji</span><span class="bg-primary rounded-sm w-1/2" style="height:12px"></span></li>
<li class="flex items-center gap-2"><span style="width:5rem">Chloe</span><span class="bg-primary rounded-sm w-1/4" style="height:12px"></span></li>
</ul>15Vertical bar chart
h-25 to h-100 bars in a fixed height chart area.
MonTueWedThuFri
<div class="flex items-end gap-2 border-b px-2" style="height:140px">
<div class="bg-info rounded-t-md flex-auto h-1/2" title="Mon">
</div>
<div class="bg-info rounded-t-md flex-auto h-3/4" title="Tue">
</div>
<div class="bg-info rounded-t-md flex-auto h-1/4" title="Wed">
</div>
<div class="bg-primary rounded-t-md flex-auto h-full" title="Thu">
</div>
<div class="bg-info rounded-t-md flex-auto h-1/2" title="Fri">
</div>
</div>
<div class="flex gap-2 px-2 small text-muted">
<span class="flex-auto text-center">Mon</span><span class="flex-auto text-center">Tue</span><span class="flex-auto text-center">Wed</span><span class="flex-auto text-center">Thu</span><span class="flex-auto text-center">Fri</span>
</div>16Fixed size icon tiles
Fixed inline sizes plus flex centring for square icon tiles.
<div class="flex gap-2">
<span class="inline-flex items-center justify-center text-bg-primary rounded-lg" style="width:32px;height:32px"><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="inline-flex items-center justify-center text-bg-primary rounded-lg text-lg" style="width:44px;height:44px"><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="inline-flex items-center justify-center text-bg-primary rounded-lg text-xl" style="width:56px;height:56px"><i class="bi bi-star-fill" aria-hidden="true"></i></span>
</div>17Search bar width
w-100 on phones and w-50 from md via a responsive column, centred with mx-auto.
<div class="row justify-center">
<div class="col-12 col-md-8 col-lg-6">
<label class="sr-only" for="ut-s-1258">Search</label>
<input id="ut-s-1258" type="search" class="form-control w-full rounded-full" placeholder="Find Beauty">
</div>
</div>18Sidebar and content
A narrow fixed sidebar and a flex-grow-1 content area that takes the rest.
90px
flex-grow-1: New pieces arrive every month, and the best ones sell out fast.
<div class="flex border rounded-lg overflow-hidden" style="height:130px">
<div class="bg-surface-2 p-2 small shrink-0" style="width:90px">
90px
</div>
<div class="grow p-2 small">
flex-grow-1: New pieces arrive every month, and the best ones sell out fast.
</div>
</div>19Responsive image height
h-auto with w-100 keeps the aspect ratio when the width changes.
<img src="https://images.unsplash.com/photo-1580418835996-7783da1c3c6c?auto=format&fit=crop&w=1600&h=700&q=70" alt="Pieces you will reach for every day" width="1600" height="700" class="w-full h-auto rounded-xl">20Width per column item
Labels with w-25 align a description list without a grid.
- Name
- Jonah Duarte
- lucas.mensah@example.com
- City
- Montreal
<dl class="mb-0 small">
<div class="flex border-b py-1">
<dt class="w-1/4 font-semibold">Name</dt>
<dd class="mb-0">Jonah Duarte</dd>
</div>
<div class="flex border-b py-1">
<dt class="w-1/4 font-semibold">Email</dt>
<dd class="mb-0 break-words">lucas.mensah@example.com</dd>
</div>
<div class="flex py-1">
<dt class="w-1/4 font-semibold">City</dt>
<dd class="mb-0">Montreal</dd>
</div>
</dl>