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-25

w-50

w-75

w-100

w-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-25

h-50

h-75

h-100

h-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-1567958451986-2de427a4a0be?auto=format&fit=crop&w=1600&h=700&q=70" alt="Five things we learned this year" 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-1598305762558-328f599df683?auto=format&fit=crop&w=800&h=800&q=70" alt="Our favourite tips for busy weeks" 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.

Rain jacket

$93.25

<div class="border rounded-3 p-3" style="max-width:20rem">
  <div class="fw-semibold">
    Rain jacket
  </div>
  <div class="small text-body-secondary mb-3">
    $93.25
  </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.

Secure payments25%

Hand-checked quality50%

Hand-checked quality75%

<div class="d-grid gap-2 small">
  <div>
    <div class="d-flex justify-content-between">
      <span>Secure payments</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>Hand-checked quality</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>Hand-checked quality</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.

Clear project honest

We listen first, then build a plan around what you actually need. Thousands of five-star reviews from customers who came back for more.

Free shipping on orders over $50 and easy returns within 30 days.

<div class="row g-2">
  <div class="col-4">
    <div class="border rounded-3 p-2 h-100 small">
      Clear project honest
    </div>
  </div>
  <div class="col-4">
    <div class="border rounded-3 p-2 h-100 small">
      We listen first, then build a plan around what you actually need. Thousands of five-star reviews from customers who came back for more.
    </div>
  </div>
  <div class="col-4">
    <div class="border rounded-3 p-2 h-100 small">
      Free shipping on orders over $50 and easy returns within 30 days.
    </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.

Coupon code

<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="SAVE29"> 
  </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.

Rows per page

<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.

How to care for linen so it lasts for years

<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="Styling one piece three different ways" class="w-100 rounded-3">
  </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="How to care for linen so it lasts for years" 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.

Mateo
Nora
Mateo
Kai

<ul class="list-unstyled mb-0 d-grid gap-1 small">
  <li class="d-flex align-items-center gap-2"><span style="width:5rem">Mateo</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">Nora</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">Mateo</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">Kai</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 Outdoor"> 
  </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 packaging is plastic-free and every delivery is carbon-neutral.

<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: Our packaging is plastic-free and every delivery is carbon-neutral.
  </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-1598305762558-328f599df683?auto=format&fit=crop&w=1600&h=700&q=70" alt="Style that works as hard as you do" 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: Leo Mensah
Email: ruby.fischer@example.com
City: Singapore

<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">Leo Mensah</dd>
  </div>
  <div class="d-flex border-bottom py-1">
    <dt class="w-25 fw-semibold">Email</dt>
    <dd class="mb-0 text-break">ruby.fischer@example.com</dd>
  </div>
  <div class="d-flex py-1">
    <dt class="w-25 fw-semibold">City</dt>
    <dd class="mb-0">Singapore</dd>
  </div>
</dl>