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-1584516150909-c43483ee7932?auto=format&fit=crop&w=1600&h=700&q=70" alt="What our patients 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.

A parent's guide to childhood vaccinations

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-1606318313647-137d1f3b4d3c?auto=format&fit=crop&w=800&h=800&q=70" alt="A parent&#39;s guide to childhood vaccinations" 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.

Blood test

$77.09

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

Certified specialists25%

Reminders50%

Family plans75%

<div class="d-grid gap-2 small">
  <div>
    <div class="d-flex justify-content-between">
      <span>Certified specialists</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>Reminders</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>Family plans</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.

Bright community modern

Our team has done this many times, so you never have to guess. We work with most insurance providers and explain any costs upfront.

Family plans cover check-ups and vaccinations for everyone under one roof.

<div class="row g-2">
  <div class="col-4">
    <div class="border rounded-3 p-2 h-100 small">
      Bright community modern
    </div>
  </div>
  <div class="col-4">
    <div class="border rounded-3 p-2 h-100 small">
      Our team has done this many times, so you never have to guess. We work with most insurance providers and explain any costs upfront.
    </div>
  </div>
  <div class="col-4">
    <div class="border rounded-3 p-2 h-100 small">
      Family plans cover check-ups and vaccinations for everyone under one roof.
    </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="SAVE25"> 
  </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.

<div class="row g-2">
  <div class="col-6">
    <img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?auto=format&fit=crop&w=1200&h=800&q=70" alt="Inside our new heart screening clinic" class="w-100 rounded-3">
  </div>
  <div class="col-6">
    <img src="https://images.unsplash.com/photo-1584516150909-c43483ee7932?auto=format&fit=crop&w=1200&h=800&q=70" alt="Understanding your blood test results" 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.

Owen
Kenji
Ella
Ethan

<ul class="list-unstyled mb-0 d-grid gap-1 small">
  <li class="d-flex align-items-center gap-2"><span style="width:5rem">Owen</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">Kenji</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">Ella</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">Ethan</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 Dental"> 
  </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 clinic is fully accessible, with free parking right outside.

<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 clinic is fully accessible, with free parking right outside.
  </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-1758691462858-f1286e5daf40?auto=format&fit=crop&w=1600&h=700&q=70" alt="Feel better with expert care" 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: Sofia Sato
Email: lea.lindqvist@example.com
City: Copenhagen

<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">Sofia Sato</dd>
  </div>
  <div class="d-flex border-bottom py-1">
    <dt class="w-25 fw-semibold">Email</dt>
    <dd class="mb-0 text-break">lea.lindqvist@example.com</dd>
  </div>
  <div class="d-flex py-1">
    <dt class="w-25 fw-semibold">City</dt>
    <dd class="mb-0">Copenhagen</dd>
  </div>
</dl>