Utility API

Utilities are single-purpose classes that you combine directly in markup. Stack several on one element, add a breakpoint infix such as d-md-flex to change behaviour from a screen size up, and tune colour states through CSS variables like --ui-bg-opacity, --ui-border-opacity and --ui-link-opacity. The recipes below build complete interface pieces without writing any custom CSS.

1A card made only of utilities

Background, border, radius, padding and shadow utilities stacked on a plain div give you a card without the card component.

Culture

Explore more, worry less

Our travel experts are on call around the clock while you are away.

<div class="bg-body border rounded-3 p-3 shadow-sm" style="max-width:22rem">
  <p class="small text-body-secondary text-uppercase fw-semibold mb-1">Culture</p>
  <h3 class="h5 mb-2">Explore more, worry less</h3>
  <p class="mb-0 text-body-secondary">Our travel experts are on call around the clock while you are away.</p>
</div>

2Responsive display: d-none d-md-flex

Breakpoint infixes switch a utility on from a screen size up. Resize the window: the toolbar row appears from md, the compact button below it.

d-none d-md-flex and d-flex d-md-none

<div class="border rounded-3 p-3 bg-body-tertiary">
  <div class="d-none d-md-flex gap-2">
    <button type="button" class="btn btn-sm btn-primary"><i class="bi bi-pencil-square" aria-hidden="true"></i> Edit</button>
    <button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-share-fill" aria-hidden="true"></i> Share</button>
    <button type="button" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash3-fill" aria-hidden="true"></i> Delete</button>
  </div>
  <div class="d-flex d-md-none">
    <button type="button" class="btn btn-sm btn-primary w-100"><i class="bi bi-three-dots" aria-hidden="true"></i> Actions</button>
  </div>
  <p class="small text-body-secondary mt-2 mb-0"><code>d-none d-md-flex</code> and <code>d-flex d-md-none</code></p>
</div>

3State via --ui-bg-opacity

Every bg-{colour} reads the --ui-bg-opacity variable, so one inline variable fades the fill (the labels sit under it, so they stay readable on every step).

.35

.15

.05

<div class="d-flex flex-wrap gap-3 small text-center">
  <div>
    <div class="bg-primary rounded-2 mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:1">
    </div>
    1
  </div>
  <div>
    <div class="bg-primary rounded-2 mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.6">
    </div>
    .6
  </div>
  <div>
    <div class="bg-primary rounded-2 mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.35">
    </div>
    .35
  </div>
  <div>
    <div class="bg-primary rounded-2 mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.15">
    </div>
    .15
  </div>
  <div>
    <div class="bg-primary rounded-2 mb-1 border" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.05">
    </div>
    .05
  </div>
</div>

4State via --ui-border-opacity

Border colour utilities read --ui-border-opacity; set it inline for values between the border-opacity-* steps.

<div class="row g-2">
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:1">
      1
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:.6">
      .6
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:.3">
      .3
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="border border-2 border-success rounded-3 p-3 text-center small" style="--ui-border-opacity:.1">
      .1
    </div>
  </div>
</div>

5State via --ui-link-opacity

Coloured links read --ui-link-opacity: fade a link that is not available yet, or fade on hover - a link people must read stays at full strength.

Hotel booking --ui-link-opacity:.5, not available
Flexible dates 100, 75 on hover
Find your next escape link-danger, faint underline

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li><a href="#" class="link-primary pe-none" style="--ui-link-opacity:.5" aria-disabled="true" tabindex="-1">Hotel booking</a> <span class="small text-body-secondary">--ui-link-opacity:.5, not available</span></li>
  <li><a href="#" class="link-primary link-opacity-100 link-opacity-75-hover">Flexible dates</a> <span class="small text-body-secondary">100, 75 on hover</span></li>
  <li><a href="#" class="link-danger link-underline-opacity-25">Find your next escape</a> <span class="small text-body-secondary">link-danger, faint underline</span></li>
</ul>

6Media object

d-flex with gap, flex-shrink-0 on the image and flex-grow-1 on the text is the classic comment or list row.

Kenji Moreauyesterday

Every detail is handled by people who care about getting it right.

<div class="d-flex gap-3 align-items-start border rounded-3 p-3">
  <img src="../assets/img/avatar-9.svg" alt="Kenji Moreau" width="48" height="48" class="rounded-circle flex-shrink-0"> 
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong>Kenji Moreau</strong><small class="text-body-secondary">yesterday</small>
    </div>
    <p class="mb-0 small">Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

7Status badges without the badge component

Subtle backgrounds, emphasis text, small padding and rounded-pill compose a soft status label.

Active Pending Blocked

<div class="d-flex flex-wrap gap-2">
  <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-pill small fw-medium bg-success-subtle text-success-emphasis border border-success-subtle"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Active</span> <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-pill small fw-medium bg-warning-subtle text-warning-emphasis border border-warning-subtle"><i class="bi bi-clock-fill" aria-hidden="true"></i> Pending</span> <span class="d-inline-flex align-items-center gap-1 px-2 py-1 rounded-pill small fw-medium bg-danger-subtle text-danger-emphasis border border-danger-subtle"><i class="bi bi-x-circle-fill" aria-hidden="true"></i> Blocked</span> 
</div>

8Stat tile

Font size, weight, line height and colour utilities turn three lines of text into a dashboard metric.

Revenue

$35,537.41

+21% this month

Customers

7.9k

-6% this month

<div class="row g-3">
  <div class="col-sm-6 col-lg-4">
    <div class="p-3 rounded-4 bg-body-tertiary border">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small text-body-secondary fw-medium">Revenue</span><span class="text-primary fs-5"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      </div>
      <div class="fs-3 fw-bold lh-1">
        $35,537.41
      </div>
      <div class="small text-success mt-1">
        <i class="bi bi-arrow-up" aria-hidden="true"></i> +21% this month
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="p-3 rounded-4 bg-body-tertiary border">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="small text-body-secondary fw-medium">Customers</span><span class="text-info fs-5"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
      </div>
      <div class="fs-3 fw-bold lh-1">
        7.9k
      </div>
      <div class="small text-danger mt-1">
        <i class="bi bi-arrow-down" aria-hidden="true"></i> -6% this month
      </div>
    </div>
  </div>
</div>

9Avatar with a status dot

position-relative on the wrapper, then position-absolute, bottom-0 / end-0 and a white border for the online dot.

<div class="d-flex gap-4 align-items-center">
  <div class="position-relative d-inline-block">
    <img src="../assets/img/avatar-2.svg" alt="Isla Lindqvist" width="56" height="56" class="rounded-circle"> <span class="position-absolute bottom-0 end-0 p-2 bg-success border border-2 border-white rounded-circle"><span class="visually-hidden">Online</span></span> 
  </div>
  <div class="position-relative d-inline-block">
    <img src="../assets/img/avatar-2.svg" alt="Luna Sato" width="56" height="56" class="rounded-circle"> <span class="position-absolute bottom-0 end-0 p-2 bg-secondary border border-2 border-white rounded-circle"><span class="visually-hidden">Away</span></span> 
  </div>
</div>

10Responsive alignment

text-center on phones and text-md-start from md: a hero block that centres only where it should.

Hand-picked stays in beautiful places

Our travel experts are on call around the clock while you are away.

Get started

<div class="p-4 rounded-4 bg-primary-subtle text-center text-md-start">
  <h3 class="h4 fw-bold text-primary-emphasis">Hand-picked stays in beautiful places</h3>
  <p class="mb-3 text-primary-emphasis">Our travel experts are on call around the clock while you are away.</p>
  <a href="#" class="btn btn-primary">Get started</a> 
</div>

11Stack on phones, row on tablets

flex-column flex-md-row with gap-3: three blocks stack on small screens and line up from md.

Best price guarantee

Local guides

Curated stays

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> <strong>Best price guarantee</strong>
  </div>
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-shield-check" aria-hidden="true"></i> <strong>Local guides</strong>
  </div>
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i> <strong>Curated stays</strong>
  </div>
</div>

12Callout from border-start

A single side border with a thick width and a theme colour makes a note or warning callout.

Heads up

We keep things simple, so you can focus on what matters to you.

<div class="border-start border-4 border-warning bg-warning-subtle rounded-end-3 p-3">
  <div class="fw-semibold text-warning-emphasis mb-1">
    <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i> Heads up
  </div>
  <p class="mb-0 small text-warning-emphasis">We keep things simple, so you can focus on what matters to you.</p>
</div>

13Settings row

justify-content-between and align-items-center place a label on the left and a control on the right.

Email alerts

Daily summary at 14:30

Push notifications

Only mentions

Off

<div class="border rounded-3">
  <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
    <div>
      <div class="fw-medium">
        Email alerts
      </div>
      <div class="small text-body-secondary">
        Daily summary at 14:30
      </div>
    </div>
    <span class="px-2 py-1 rounded-pill small bg-success text-white">On</span> 
  </div>
  <div class="d-flex justify-content-between align-items-center p-3">
    <div>
      <div class="fw-medium">
        Push notifications
      </div>
      <div class="small text-body-secondary">
        Only mentions
      </div>
    </div>
    <span class="px-2 py-1 rounded-pill small bg-body-secondary text-body-secondary">Off</span> 
  </div>
</div>

14Announcement bar

text-bg-dark sets a contrasting text colour with the background; small and gap utilities do the rest.

New Pack your bags, we will do the rest Read more

<div class="text-bg-dark rounded-3 px-3 py-2 d-flex flex-wrap align-items-center justify-content-center gap-2 small">
  <span class="badge text-bg-warning">New</span> <span>Pack your bags, we will do the rest</span> <a href="#" class="link-light link-offset-2 fw-semibold">Read more</a> 
</div>

15Filter chips that wrap

flex-wrap with gap-2 lets a row of chips flow onto new lines without margin hacks.

All insights Culture clear dashboard

<div class="d-flex flex-wrap gap-2">
  <span class="px-3 py-1 rounded-pill text-bg-primary small">All</span> <span class="px-3 py-1 rounded-pill border small">insights</span> <span class="px-3 py-1 rounded-pill border small">Culture</span> <span class="px-3 py-1 rounded-pill border small">clear</span> <span class="px-3 py-1 rounded-pill border small">dashboard</span> 
</div>

16Product line item

A thumbnail, a truncated title and a right-aligned price: overflow-hidden on the middle column lets text-truncate work in flex.

Island hopping tour - powerful edition

Beach

$643.00

<div class="d-flex align-items-center gap-3 border rounded-3 p-2" style="max-width:28rem">
  <img src="../assets/img/product-4.svg" alt="Island hopping tour" width="56" height="56" class="rounded-2 object-fit-cover flex-shrink-0"> 
  <div class="flex-grow-1 overflow-hidden">
    <div class="fw-medium text-truncate">
      Island hopping tour - powerful edition
    </div>
    <div class="small text-body-secondary">
      Beach
    </div>
  </div>
  <div class="fw-bold text-nowrap">
    $643.00
  </div>
</div>

17Responsive spacing

p-2 p-md-4 and mb-2 mb-md-3: tighter padding on phones, roomier from md, no media query needed.

Behind the scenes with our hotel inspectors

Thousands of travellers already trust us, and we work hard to keep it that way. Members get room upgrades and late check-out at selected hotels.

<div class="border rounded-4 p-2 p-md-4 bg-body-tertiary">
  <h3 class="h6 mb-2 mb-md-3">Behind the scenes with our hotel inspectors</h3>
  <p class="mb-0 small">Thousands of travellers already trust us, and we work hard to keep it that way. Members get room upgrades and late check-out at selected hotels.</p>
</div>

18Underline that appears on hover

link-underline-opacity-0 hides the underline, the -hover variants bring it back with a little offset.

<nav class="d-flex flex-wrap gap-3" aria-label="Footer">
  <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">About</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">Pricing</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">Support</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover">Careers</a> 
</nav>

19Image with a text overlay

position-relative wrapper, an absolutely placed caption at bottom-0 and bg-dark with --ui-bg-opacity for the scrim.

Cape Town

Weekends you will talk about for years

<div class="position-relative rounded-4 overflow-hidden" style="max-width:26rem">
  <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=1200&h=800&q=70" alt="Your perfect holiday, planned for you" class="w-100 d-block"> 
  <div class="position-absolute bottom-0 start-0 end-0 bg-dark text-white p-3" style="--ui-bg-opacity:.6">
    <div class="small text-white-50">
      Cape Town
    </div>
    <div class="fw-semibold">
      Weekends you will talk about for years
    </div>
  </div>
</div>

20Empty state panel

A centred flex column with a large icon, muted text and one action, built from spacing and text utilities.

No files yet

Every trip supports local businesses and responsible tourism.

<div class="d-flex flex-column align-items-center text-center py-5 px-3 border rounded-4 bg-body-tertiary">
  <div class="fs-1 text-body-tertiary mb-2">
    <i class="bi bi-folder2-open" aria-hidden="true"></i>
  </div>
  <h3 class="h6 fw-semibold mb-1">No files yet</h3>
  <p class="small text-body-secondary mb-3">Every trip supports local businesses and responsible tourism.</p>
  <button type="button" class="btn btn-sm btn-primary"><i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i> Upload</button>
</div>