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.
Web
Strategy, design and code under one roof
The new weekly demos guides complex tasks into simple steps on any device.
<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">Web</p>
<h3 class="h5 mb-2">Strategy, design and code under one roof</h3>
<p class="mb-0 text-muted">The new weekly demos guides complex tasks into simple steps on any device.</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 while the text stays fully opaque.
<div class="flex flex-wrap gap-2">
<div class="bg-primary text-white rounded-md px-4 py-2" style="--ui-bg-opacity:1">
1
</div>
<div class="bg-primary rounded-md px-4 py-2" style="--ui-bg-opacity:.6">
.6
</div>
<div class="bg-primary rounded-md px-4 py-2" style="--ui-bg-opacity:.35">
.35
</div>
<div class="bg-primary rounded-md px-4 py-2" style="--ui-bg-opacity:.15">
.15
</div>
<div class="bg-primary rounded-md px-4 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-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. Combine it with the -hover utilities for a link that brightens on hover.
- Web design --ui-link-opacity:.5
- Award-winning team 50, 100 on hover
- Bold ideas, beautifully executed link-opacity-75
<ul class="list-unstyled mb-0 grid gap-2">
<li><a href="#" class="link-primary" style="--ui-link-opacity:.5">Web design</a> <span class="small text-muted">--ui-link-opacity:.5</span></li>
<li><a href="#" class="link-primary link-opacity-50 link-opacity-100-hover">Award-winning team</a> <span class="small text-muted">50, 100 on hover</span></li>
<li><a href="#" class="link-danger link-opacity-75">Bold ideas, beautifully executed</a> <span class="small text-muted">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.
Our campaign production gives customers coming back for teams of every size.
<div class="flex gap-4 items-start border rounded-lg p-4">
<img src="../assets/img/avatar-10.svg" alt="Kai Moreau" width="48" height="48" class="rounded-full shrink-0">
<div class="grow">
<div class="flex justify-between">
<strong>Kai Moreau</strong><small class="text-muted">yesterday</small>
</div>
<p class="mb-0 small">Our campaign production gives customers coming back for teams of every size.</p>
</div>
</div>7Status badges without the badge component
Subtle backgrounds, emphasis text, small padding and rounded-pill compose a soft status label.
<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.
<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 text-lg"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
</div>
<div class="text-2xl font-bold leading-none">
$23,799.61
</div>
<div class="small text-success mt-1">
<i class="bi bi-arrow-up" aria-hidden="true"></i> +32% 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 text-lg"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
</div>
<div class="text-2xl font-bold leading-none">
7.1k
</div>
<div class="small text-danger mt-1">
<i class="bi bi-arrow-down" aria-hidden="true"></i> -7% 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.
Online
Away
<div class="flex gap-6 items-center">
<div class="relative inline-block">
<img src="../assets/img/avatar-3.svg" alt="Finn Varga" 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-6.svg" alt="Nora Ibrahim" 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.
Bold ideas, beautifully executed
A elegant story brings decisions quicker and clearer wherever you are.
Get started<div class="p-6 rounded-xl bg-primary-subtle text-center md:text-start">
<h3 class="h4 font-bold text-primary-emphasis">Bold ideas, beautifully executed</h3>
<p class="mb-4 text-primary-emphasis">A elegant story brings decisions quicker and clearer wherever you are.</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.
<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>Fast turnaround</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>Award-winning team</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>Senior designers only</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.
A modern dashboard turns the whole team on the same page in just a few clicks.
<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">A modern dashboard turns the whole team on the same page in just a few clicks.</p>
</div>13Settings row
justify-content-between and align-items-center place a label on the left and a control on the right.
<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 14: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.
<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>Make your next launch unforgettable</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.
<div class="flex flex-wrap gap-2">
<span class="px-4 py-1 rounded-full bg-primary text-white small">All</span> <span class="px-4 py-1 rounded-full border small">tips</span> <span class="px-4 py-1 rounded-full border small">Print</span> <span class="px-4 py-1 rounded-full border small">clear</span> <span class="px-4 py-1 rounded-full border small">journey</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.
<div class="flex items-center gap-4 border rounded-lg p-2" style="max-width:28rem">
<img src="../assets/img/product-10.svg" alt="Website package" width="56" height="56" class="rounded-md object-cover shrink-0">
<div class="grow overflow-hidden">
<div class="font-medium truncate">
Website package - practical edition
</div>
<div class="small text-muted">
Branding
</div>
</div>
<div class="font-bold whitespace-nowrap">
$145.50
</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.
Journey notes for clients
This honest story turns you focused on what matters from the very first day. The new global clients helps time back in your day wherever you are.
<div class="border rounded-xl p-2 md:p-6 bg-surface-3">
<h3 class="h6 mb-2 md:mb-4">Journey notes for clients</h3>
<p class="mb-0 small">This honest story turns you focused on what matters from the very first day. The new global clients helps time back in your day wherever you are.</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.
<div class="relative rounded-xl overflow-hidden" style="max-width:26rem">
<img src="../assets/img/photo-4.svg" alt="We design brands people remember" 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">
Montreal
</div>
<div class="font-semibold">
Strategy, design and code under one roof
</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
The new fixed-price projects gives you focused on what matters all year round.
<div class="flex flex-col items-center text-center py-12 px-4 border rounded-xl bg-surface-3">
<div class="text-4xl text-muted/70 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">The new fixed-price projects gives you focused on what matters all year round.</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>