Sizing
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="d-grid gap-2 bg-body-tertiary rounded-3 p-2">
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small w-25">
<code class="small">w-25</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small w-50">
<code class="small">w-50</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small w-75">
<code class="small">w-75</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small w-100">
<code class="small">w-100</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 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="d-flex align-items-start gap-2 bg-body-tertiary rounded-3 p-2" style="height:160px">
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small h-25">
<code class="small">h-25</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small h-50">
<code class="small">h-50</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small h-75">
<code class="small">h-75</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 p-2 small h-100">
<code class="small">h-100</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-2 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-body-tertiary rounded-3 p-2" style="max-width:22rem">
<img src="https://images.unsplash.com/photo-1614088459293-5669fadc3448?auto=format&fit=crop&w=1600&h=700&q=70" alt="What our travellers asked us most" width="900" class="mw-100 h-auto rounded-3 d-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-body-tertiary rounded-3 p-2 d-flex gap-2" style="height:120px">
<img src="https://images.unsplash.com/photo-1553355202-f869c36581ca?auto=format&fit=crop&w=800&h=800&q=70" alt="A first-timer's guide to safari" width="300" height="300" class="mh-100 w-auto rounded-3">
<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.
Food tour
$97.90
<div class="border rounded-3 p-3" style="max-width:20rem">
<div class="fw-semibold">
Food tour
</div>
<div class="small text-body-secondary mb-3">
$97.90
</div>
<button type="button" class="btn btn-primary w-100">Add to cart</button>
</div>6Progress bars with widths
Width utilities on the inner bar of a meter.
Best price guarantee25%
Best price guarantee50%
24/7 assistance75%
<div class="d-grid gap-2 small">
<div>
<div class="d-flex justify-content-between">
<span>Best price guarantee</span><span>25%</span>
</div>
<div class="bg-body-secondary rounded-pill" style="height:6px">
<div class="bg-danger rounded-pill h-100 w-25">
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-between">
<span>Best price guarantee</span><span>50%</span>
</div>
<div class="bg-body-secondary rounded-pill" style="height:6px">
<div class="bg-warning rounded-pill h-100 w-50">
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-between">
<span>24/7 assistance</span><span>75%</span>
</div>
<div class="bg-body-secondary rounded-pill" style="height:6px">
<div class="bg-success rounded-pill h-100 w-75">
</div>
</div>
</div>
</div>7Equal height cards
h-100 on cards inside a row makes every card as tall as the tallest.
Focused dashboard secure
Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email.
Flexible dates help you find quieter weeks and better prices.
<div class="row g-2">
<div class="col-4">
<div class="border rounded-3 p-2 h-100 small">
Focused dashboard secure
</div>
</div>
<div class="col-4">
<div class="border rounded-3 p-2 h-100 small">
Members get room upgrades and late check-out at selected hotels. Friendly people answer your questions quickly, by phone, chat or email.
</div>
</div>
<div class="col-4">
<div class="border rounded-3 p-2 h-100 small">
Flexible dates help you find quieter weeks and better prices.
</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-100" placeholder="SAVE10">
</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="d-flex gap-2" style="height:140px">
<div class="w-25 h-100 bg-body-secondary rounded-3 p-2 small">
w-25 h-100
</div>
<div class="w-75 h-100 bg-body-tertiary border rounded-3 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="d-flex align-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-1554366347-897a5113f6ab?auto=format&fit=crop&w=1200&h=800&q=70" alt="Looking back at a busy season" class="w-100 rounded-3">
</div>
<div class="col-6">
<img src="https://images.unsplash.com/photo-1584467541268-b040f83be3fd?auto=format&fit=crop&w=1200&h=800&q=70" alt="Travelling with kids: our tried and tested tips" class="w-100 rounded-3">
</div>
</div>13Half width centred
w-50 with mx-auto centres a narrow block.
w-50 mx-auto
<div class="bg-body-tertiary rounded-3 p-3">
<div class="w-50 mx-auto bg-body border rounded-3 p-2 text-center small">
w-50 mx-auto
</div>
</div>14Stat bars
Horizontal bars with width utilities compare four values.
- Nadia
- Lea
- Finn
- Ella
<ul class="list-unstyled mb-0 d-grid gap-1 small">
<li class="d-flex align-items-center gap-2"><span style="width:5rem">Nadia</span><span class="bg-primary rounded-1 w-100" style="height:12px"></span></li>
<li class="d-flex align-items-center gap-2"><span style="width:5rem">Lea</span><span class="bg-primary rounded-1 w-75" style="height:12px"></span></li>
<li class="d-flex align-items-center gap-2"><span style="width:5rem">Finn</span><span class="bg-primary rounded-1 w-50" style="height:12px"></span></li>
<li class="d-flex align-items-center gap-2"><span style="width:5rem">Ella</span><span class="bg-primary rounded-1 w-25" style="height:12px"></span></li>
</ul>15Vertical bar chart
h-25 to h-100 bars in a fixed height chart area.
MonTueWedThuFri
<div class="d-flex align-items-end gap-2 border-bottom px-2" style="height:140px">
<div class="bg-info rounded-top flex-fill h-50" title="Mon">
</div>
<div class="bg-info rounded-top flex-fill h-75" title="Tue">
</div>
<div class="bg-info rounded-top flex-fill h-25" title="Wed">
</div>
<div class="bg-primary rounded-top flex-fill h-100" title="Thu">
</div>
<div class="bg-info rounded-top flex-fill h-50" title="Fri">
</div>
</div>
<div class="d-flex gap-2 px-2 small text-body-secondary">
<span class="flex-fill text-center">Mon</span><span class="flex-fill text-center">Tue</span><span class="flex-fill text-center">Wed</span><span class="flex-fill text-center">Thu</span><span class="flex-fill text-center">Fri</span>
</div>16Fixed size icon tiles
Fixed inline sizes plus flex centring for square icon tiles.
<div class="d-flex gap-2">
<span class="d-inline-flex align-items-center justify-content-center text-bg-primary rounded-3" style="width:32px;height:32px"><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="d-inline-flex align-items-center justify-content-center text-bg-primary rounded-3 fs-5" style="width:44px;height:44px"><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="d-inline-flex align-items-center justify-content-center text-bg-primary rounded-3 fs-4" 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-content-center">
<div class="col-12 col-md-8 col-lg-6">
<label class="visually-hidden" for="ut-s-1258">Search</label>
<input id="ut-s-1258" type="search" class="form-control w-100 rounded-pill" placeholder="Find Mountain">
</div>
</div>18Sidebar and content
A narrow fixed sidebar and a flex-grow-1 content area that takes the rest.
90px
flex-grow-1: Local guides show you the places that never make it into guidebooks.
<div class="d-flex border rounded-3 overflow-hidden" style="height:130px">
<div class="bg-body-secondary p-2 small flex-shrink-0" style="width:90px">
90px
</div>
<div class="flex-grow-1 p-2 small">
flex-grow-1: Local guides show you the places that never make it into guidebooks.
</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-1554366347-897a5113f6ab?auto=format&fit=crop&w=1600&h=700&q=70" alt="Weekends you will talk about for years" width="1600" height="700" class="w-100 h-auto rounded-4">20Width per column item
Labels with w-25 align a description list without a grid.
- Name
- Ethan Whitaker
- theo.ibrahim@example.com
- City
- Prague
<dl class="mb-0 small">
<div class="d-flex border-bottom py-1">
<dt class="w-25 fw-semibold">Name</dt>
<dd class="mb-0">Ethan Whitaker</dd>
</div>
<div class="d-flex border-bottom py-1">
<dt class="w-25 fw-semibold">Email</dt>
<dd class="mb-0 text-break">theo.ibrahim@example.com</dd>
</div>
<div class="d-flex py-1">
<dt class="w-25 fw-semibold">City</dt>
<dd class="mb-0">Prague</dd>
</div>
</dl>