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.

Yoga

Move more, stress less

Our yoga lets customers coming back without the usual hassle.

<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">Yoga</p>
  <h3 class="h5 mb-2">Move more, stress less</h3>
  <p class="mb-0 text-body-secondary">Our yoga lets customers coming back without the usual hassle.</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" aria-hidden="true"></i> Share</button>
    <button type="button" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash3" 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 while the text stays fully opaque.

.35

.15

.05

<div class="d-flex flex-wrap gap-2">
  <div class="bg-primary text-white rounded-2 px-3 py-2" style="--ui-bg-opacity:1">
    1
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.6">
    .6
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.35">
    .35
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.15">
    .15
  </div>
  <div class="bg-primary rounded-2 px-3 py-2" style="--ui-bg-opacity:.05">
    .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. Combine it with the -hover utilities for a link that brightens on hover.

Group classes --ui-link-opacity:.5
Flexible plans 50, 100 on hover
Move more, stress less link-opacity-75

<ul class="list-unstyled mb-0 d-grid gap-2">
  <li><a href="#" class="link-primary" style="--ui-link-opacity:.5">Group classes</a> <span class="small text-body-secondary">--ui-link-opacity:.5</span></li>
  <li><a href="#" class="link-primary link-opacity-50 link-opacity-100-hover">Flexible plans</a> <span class="small text-body-secondary">50, 100 on hover</span></li>
  <li><a href="#" class="link-danger link-opacity-75">Move more, stress less</a> <span class="small text-body-secondary">link-opacity-75</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.

Leo Moreau18 hours ago

The new modern equipment brings projects moving forward from the very first day.

<div class="d-flex gap-3 align-items-start border rounded-3 p-3">
  <img src="../assets/img/avatar-5.svg" alt="Leo Moreau" width="48" height="48" class="rounded-circle flex-shrink-0"> 
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between">
      <strong>Leo Moreau</strong><small class="text-body-secondary">18 hours ago</small>
    </div>
    <p class="mb-0 small">The new modern equipment brings projects moving forward from the very first day.</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" 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

$43,259.47

+50% this month

Customers

2.9k

-2% 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">
        $43,259.47
      </div>
      <div class="small text-success mt-1">
        <i class="bi bi-arrow-up" aria-hidden="true"></i> +50% 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" aria-hidden="true"></i></span>
      </div>
      <div class="fs-3 fw-bold lh-1">
        2.9k
      </div>
      <div class="small text-danger mt-1">
        <i class="bi bi-arrow-down" aria-hidden="true"></i> -2% 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-9.svg" alt="Aria Carter" 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-9.svg" alt="Priya Duarte" 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.

Train smarter, feel better

The new open 24/7 shows projects moving forward without extra tools.

Get started

<div class="p-4 rounded-4 bg-primary-subtle text-center text-md-start">
  <h3 class="h4 fw-bold text-primary-emphasis">Train smarter, feel better</h3>
  <p class="mb-3 text-primary-emphasis">The new open 24/7 shows projects moving forward without extra tools.</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.

Open 24/7

Certified coaches

<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>Open 24/7</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>Open 24/7</strong>
  </div>
  <div class="flex-fill p-3 rounded-3 border bg-body-tertiary">
    <i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> <strong>Certified coaches</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

The new modern equipment gives time back in your day at a fair price.

<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">The new modern equipment gives time back in your day at a fair price.</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 13:00

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 13:00
      </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 Your fitness journey starts now 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>Your fitness journey starts now</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 release Cardio secure release

<div class="d-flex flex-wrap gap-2">
  <span class="px-3 py-1 rounded-pill bg-primary text-white small">All</span> <span class="px-3 py-1 rounded-pill border small">release</span> <span class="px-3 py-1 rounded-pill border small">Cardio</span> <span class="px-3 py-1 rounded-pill border small">secure</span> <span class="px-3 py-1 rounded-pill border small">release</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.

Nutrition guide - modern edition

HIIT

$465.99

<div class="d-flex align-items-center gap-3 border rounded-3 p-2" style="max-width:28rem">
  <img src="../assets/img/product-8.svg" alt="Nutrition guide" 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">
      Nutrition guide - modern edition
    </div>
    <div class="small text-body-secondary">
      HIIT
    </div>
  </div>
  <div class="fw-bold text-nowrap">
    $465.99
  </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.

A guide to personal training

Our personal training guides every detail in view all year round. This reliable update lets projects moving forward without the usual hassle.

<div class="border rounded-4 p-2 p-md-4 bg-body-tertiary">
  <h3 class="h6 mb-2 mb-md-3">A guide to personal training</h3>
  <p class="mb-0 small">Our personal training guides every detail in view all year round. This reliable update lets projects moving forward without the usual hassle.</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.

Vancouver

Stronger every single day

<div class="position-relative rounded-4 overflow-hidden" style="max-width:26rem">
  <img src="../assets/img/photo-1.svg" alt="Train smarter, feel better" 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">
      Vancouver
    </div>
    <div class="fw-semibold">
      Stronger every single day
    </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

A clear story makes customers coming back for teams of every size.

<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">A clear story makes customers coming back for teams of every size.</p>
  <button type="button" class="btn btn-sm btn-primary"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> Upload</button>
</div>