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-1538333581680-29dd4752ddf2?auto=format&fit=crop&w=1600&h=700&q=70" alt="Our chef's guide to seasonal autumn produce" 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-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&h=800&q=70" alt="A beginner's guide to getting started" 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.
Lemon tiramisu
$69.41
<div class="border rounded-lg p-4" style="max-width:20rem">
<div class="font-semibold">
Lemon tiramisu
</div>
<div class="small text-muted mb-4">
$69.41
</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.
Kid friendly25%
Local ingredients50%
Kid friendly75%
<div class="grid gap-2 small">
<div>
<div class="flex justify-between">
<span>Kid friendly</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>Local ingredients</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>Kid friendly</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.
Clear journey reliable
Cooking classes on Saturday mornings teach you our favourite recipes. Start in minutes and get help from a real person whenever you need it.
Children are always welcome, with a menu made just for them.
<div class="row g-2">
<div class="col-4">
<div class="border rounded-lg p-2 h-full small">
Clear journey reliable
</div>
</div>
<div class="col-4">
<div class="border rounded-lg p-2 h-full small">
Cooking classes on Saturday mornings teach you our favourite recipes. Start in minutes and get help from a real person whenever you need it.
</div>
</div>
<div class="col-4">
<div class="border rounded-lg p-2 h-full small">
Children are always welcome, with a menu made just for them.
</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="SAVE30">
</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-1559339352-11d035aa65de?auto=format&fit=crop&w=1200&h=800&q=70" alt="How we make our sourdough every morning" class="w-full rounded-lg">
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1625862692743-3f57873bb37c?auto=format&fit=crop&w=1200&h=800&q=70" alt="Looking back at a busy season" 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.
- Nora
- Sofia
- Owen
- Felix
<ul class="list-unstyled mb-0 grid gap-1 small">
<li class="flex items-center gap-2"><span style="width:5rem">Nora</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">Sofia</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">Owen</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">Felix</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 Drinks">
</div>
</div>18Sidebar and content
A narrow fixed sidebar and a flex-grow-1 content area that takes the rest.
90px
flex-grow-1: Our sommelier has paired each dish with wines from small family vineyards.
<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: Our sommelier has paired each dish with wines from small family vineyards.
</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-1551632436-cbf8dd35adfa?auto=format&fit=crop&w=1600&h=700&q=70" alt="The neighbourhood kitchen everyone loves" 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
- Noah Morgan
- luna.lindqvist@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">Noah Morgan</dd>
</div>
<div class="flex border-b py-1">
<dt class="w-1/4 font-semibold">Email</dt>
<dd class="mb-0 break-words">luna.lindqvist@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>