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

h-50

h-75

h-100

h-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="../assets/img/wide-5.svg" alt="How we rebuilt our project" 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="../assets/img/square-11.svg" alt="Idea notes for attendees" 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.

Early bird pass

$90.58

<div class="border rounded-lg p-4" style="max-width:20rem">
  <div class="font-semibold">
    Early bird pass
  </div>
  <div class="small text-muted mb-4">
    $90.58
  </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.

Mobile agenda25%

Certificates50%

Hands-on workshops75%

<div class="grid gap-2 small">
  <div>
    <div class="flex justify-between">
      <span>Mobile agenda</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>Certificates</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>Hands-on workshops</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 experience elegant

This secure journey connects your work organised for teams of every size. The new certificates makes every detail in view for teams of every size.

The new networking lounges helps the whole team on the same page with friendly support.

<div class="row g-2">
  <div class="col-4">
    <div class="border rounded-lg p-2 h-full small">
      Reliable experience elegant
    </div>
  </div>
  <div class="col-4">
    <div class="border rounded-lg p-2 h-full small">
      This secure journey connects your work organised for teams of every size. The new certificates makes every detail in view for teams of every size.
    </div>
  </div>
  <div class="col-4">
    <div class="border rounded-lg p-2 h-full small">
      The new networking lounges helps the whole team on the same page with friendly support.
    </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-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.

Rows per page

<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="../assets/img/photo-3.svg" alt="Community notes for attendees" class="w-full rounded-lg">
  </div>
  <div class="col-6">
    <img src="../assets/img/photo-4.svg" alt="What&#39;s new in webinar" 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.

Ravi
Luna
Liam
Tariq

<ul class="list-unstyled mb-0 grid gap-1 small">
  <li class="flex items-center gap-2"><span style="width:5rem">Ravi</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">Luna</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">Liam</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">Tariq</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 bg-primary text-white 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 bg-primary text-white 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 bg-primary text-white 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 Webinar"> 
  </div>
</div>

18Sidebar and content

A narrow fixed sidebar and a flex-grow-1 content area that takes the rest.

90px

flex-grow-1: The new recorded sessions brings results you can measure wherever you are.

<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: The new recorded sessions brings results you can measure wherever you are.
  </div>
</div>

19Responsive image height

h-auto with w-100 keeps the aspect ratio when the width changes.

<img src="../assets/img/wide-4.svg" alt="Where great ideas meet" 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: Isla Quinn
Email: elena.duarte@example.com
City: Cape Town

<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">Isla Quinn</dd>
  </div>
  <div class="flex border-b py-1">
    <dt class="w-1/4 font-semibold">Email</dt>
    <dd class="mb-0 break-words">elena.duarte@example.com</dd>
  </div>
  <div class="flex py-1">
    <dt class="w-1/4 font-semibold">City</dt>
    <dd class="mb-0">Cape Town</dd>
  </div>
</dl>