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.

Motion

Stories told in pixels and motion

Small teams, short feedback loops and no handoffs lost in translation.

<div class="bg-page border rounded-lg p-4 shadow-sm" style="max-width:22rem">
  <p class="small text-muted uppercase font-semibold mb-1">Motion</p>
  <h3 class="h5 mb-2">Stories told in pixels and motion</h3>
  <p class="mb-0 text-muted">Small teams, short feedback loops and no handoffs lost in translation.</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-lg p-4 bg-surface-3">
  <div class="hidden 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="flex md:hidden">
    <button type="button" class="btn btn-sm btn-primary w-full"><i class="bi bi-three-dots" aria-hidden="true"></i> Actions</button>
  </div>
  <p class="small text-muted 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="flex flex-wrap gap-4 small text-center">
  <div>
    <div class="bg-primary rounded-md mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:1">
    </div>
    1
  </div>
  <div>
    <div class="bg-primary rounded-md mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.6">
    </div>
    .6
  </div>
  <div>
    <div class="bg-primary rounded-md mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.35">
    </div>
    .35
  </div>
  <div>
    <div class="bg-primary rounded-md mb-1" style="width:3.5rem;height:2.5rem;--ui-bg-opacity:.15">
    </div>
    .15
  </div>
  <div>
    <div class="bg-primary rounded-md 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-lg p-4 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-lg p-4 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-lg p-4 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-lg p-4 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.

Content strategy --ui-link-opacity:.5, not available
Weekly demos 100, 75 on hover
We design brands people remember link-danger, faint underline

<ul class="list-unstyled mb-0 grid gap-2">
  <li><a href="#" class="link-primary pointer-events-none" style="--ui-link-opacity:.5" aria-disabled="true" tabindex="-1">Content strategy</a> <span class="small text-muted">--ui-link-opacity:.5, not available</span></li>
  <li><a href="#" class="link-primary link-opacity-100 link-opacity-75-hover">Weekly demos</a> <span class="small text-muted">100, 75 on hover</span></li>
  <li><a href="#" class="link-danger link-underline-opacity-25">We design brands people remember</a> <span class="small text-muted">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.

Mason Vargayesterday

We measure success by how many clients come back and tell their friends.

<div class="flex gap-4 items-start border rounded-lg p-4">
  <img src="../assets/img/avatar-9.svg" alt="Mason Varga" width="48" height="48" class="rounded-full shrink-0"> 
  <div class="grow">
    <div class="flex justify-between">
      <strong>Mason Varga</strong><small class="text-muted">yesterday</small>
    </div>
    <p class="mb-0 small">We measure success by how many clients come back and tell their friends.</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="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full small font-medium bg-success-subtle text-success-emphasis border border-success/30"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Active</span> <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full small font-medium bg-warning-subtle text-warning-emphasis border border-warning/30"><i class="bi bi-clock-fill" aria-hidden="true"></i> Pending</span> <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full small font-medium bg-danger-subtle text-danger-emphasis border border-danger/30"><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

$31,171.22

+29% this month

Customers

6.4k

-5% this month

<div class="row g-3">
  <div class="col-sm-6 col-lg-4">
    <div class="p-4 rounded-xl bg-surface-3 border">
      <div class="flex justify-between items-center mb-2">
        <span class="small text-muted font-medium">Revenue</span><span class="text-primary-ink text-lg"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
      </div>
      <div class="text-2xl font-bold leading-none">
        $31,171.22
      </div>
      <div class="small text-success-emphasis mt-1">
        <i class="bi bi-arrow-up" aria-hidden="true"></i> +29% this month
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="p-4 rounded-xl bg-surface-3 border">
      <div class="flex justify-between items-center mb-2">
        <span class="small text-muted font-medium">Customers</span><span class="text-info-emphasis text-lg"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
      </div>
      <div class="text-2xl font-bold leading-none">
        6.4k
      </div>
      <div class="small text-danger-emphasis mt-1">
        <i class="bi bi-arrow-down" aria-hidden="true"></i> -5% 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="flex gap-6 items-center">
  <div class="relative inline-block">
    <img src="../assets/img/avatar-6.svg" alt="Owen Okafor" width="56" height="56" class="rounded-full"> <span class="absolute bottom-0 end-0 p-2 bg-success border border-2 border-white rounded-full"><span class="sr-only">Online</span></span> 
  </div>
  <div class="relative inline-block">
    <img src="../assets/img/avatar-3.svg" alt="Samir Kowalski" width="56" height="56" class="rounded-full"> <span class="absolute bottom-0 end-0 p-2 bg-secondary border border-2 border-white rounded-full"><span class="sr-only">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.

Brands that stand out and sell

We combine strategy, design and technology to build brands that grow.

Get started

<div class="p-6 rounded-xl bg-primary-subtle text-center md:text-start">
  <h3 class="h4 font-bold text-primary-emphasis">Brands that stand out and sell</h3>
  <p class="mb-4 text-primary-emphasis">We combine strategy, design and technology to build brands that grow.</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.

Global clients

Senior designers only

Weekly demos

<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-auto p-4 rounded-lg border bg-surface-3">
    <i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> <strong>Global clients</strong>
  </div>
  <div class="flex-auto p-4 rounded-lg border bg-surface-3">
    <i class="bi bi-shield-check" aria-hidden="true"></i> <strong>Senior designers only</strong>
  </div>
  <div class="flex-auto p-4 rounded-lg border bg-surface-3">
    <i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i> <strong>Weekly demos</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 test early with real users, so the final design works on the first day.

<div class="border-s border-4 border-warning bg-warning-subtle rounded-end-3 p-4">
  <div class="font-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 test early with real users, so the final design works on the first day.</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 16:00

Push notifications

Only mentions

Off

<div class="border rounded-lg">
  <div class="flex justify-between items-center p-4 border-b">
    <div>
      <div class="font-medium">
        Email alerts
      </div>
      <div class="small text-muted">
        Daily summary at 16:00
      </div>
    </div>
    <span class="px-2 py-1 rounded-full small bg-success text-white">On</span> 
  </div>
  <div class="flex justify-between items-center p-4">
    <div>
      <div class="font-medium">
        Push notifications
      </div>
      <div class="small text-muted">
        Only mentions
      </div>
    </div>
    <span class="px-2 py-1 rounded-full small bg-surface-2 text-muted">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 Creative work with measurable results Read more

<div class="text-bg-dark rounded-lg px-4 py-2 flex flex-wrap items-center justify-center gap-2 small">
  <span class="badge text-bg-warning">New</span> <span>Creative work with measurable results</span> <a href="#" class="link-light link-offset-2 font-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 Branding practical project

<div class="flex flex-wrap gap-2">
  <span class="px-4 py-1 rounded-full text-bg-primary small">All</span> <span class="px-4 py-1 rounded-full border small">insights</span> <span class="px-4 py-1 rounded-full border small">Branding</span> <span class="px-4 py-1 rounded-full border small">practical</span> <span class="px-4 py-1 rounded-full border small">project</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.

Social kit - elegant edition

Social

$1,900

<div class="flex items-center gap-4 border rounded-lg p-2" style="max-width:28rem">
  <img src="../assets/img/product-3.svg" alt="Social kit" width="56" height="56" class="rounded-md object-cover shrink-0"> 
  <div class="grow overflow-hidden">
    <div class="font-medium truncate">
      Social kit - elegant edition
    </div>
    <div class="small text-muted">
      Social
    </div>
  </div>
  <div class="font-bold whitespace-nowrap">
    $1,900
  </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.

Designing packaging that survives the shelf

Thousands of clients already trust us, and we work hard to keep it that way. Websites we build are fast, accessible and easy for your team to update.

<div class="border rounded-xl p-2 md:p-6 bg-surface-3">
  <h3 class="h6 mb-2 md:mb-4">Designing packaging that survives the shelf</h3>
  <p class="mb-0 small">Thousands of clients already trust us, and we work hard to keep it that way. Websites we build are fast, accessible and easy for your team to update.</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="flex flex-wrap gap-4" 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.

Thoughtful design for ambitious companies

Edinburgh

Stories told in pixels and motion

<div class="relative rounded-xl overflow-hidden" style="max-width:26rem">
  <img src="https://images.unsplash.com/photo-1787647559705-d2ad3322020e?auto=format&fit=crop&w=1200&h=800&q=70" alt="Thoughtful design for ambitious companies" class="w-full block"> 
  <div class="absolute bottom-0 start-0 end-0 bg-dark text-white p-4" style="--ui-bg-opacity:.6">
    <div class="small text-white/50">
      Edinburgh
    </div>
    <div class="font-semibold">
      Stories told in pixels and motion
    </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

Clients stay with us for years because we treat their brand like our own.

<div class="flex flex-col items-center text-center py-12 px-4 border rounded-xl bg-surface-3">
  <div class="text-4xl text-tertiary mb-2">
    <i class="bi bi-folder2-open" aria-hidden="true"></i>
  </div>
  <h3 class="h6 font-semibold mb-1">No files yet</h3>
  <p class="small text-muted mb-4">Clients stay with us for years because we treat their brand like our own.</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>