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.
Specials
A table for every occasion
Order for pickup or delivery and enjoy the same dishes at home.
<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">Specials</p>
<h3 class="h5 mb-2">A table for every occasion</h3>
<p class="mb-0 text-muted">Order for pickup or delivery and enjoy the same dishes at home.</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).
<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.
- Wine pairing --ui-link-opacity:.5, not available
- Online reservations 100, 75 on hover
- Wood-fired, slow-cooked, unforgettable 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">Wine pairing</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">Online reservations</a> <span class="small text-muted">100, 75 on hover</span></li>
<li><a href="#" class="link-danger link-underline-opacity-25">Wood-fired, slow-cooked, unforgettable</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.
Bread is baked every morning and pasta is rolled by hand in our kitchen.
<div class="flex gap-4 items-start border rounded-lg p-4">
<img src="../assets/img/avatar-4.svg" alt="Ravi Ortega" width="48" height="48" class="rounded-full shrink-0">
<div class="grow">
<div class="flex justify-between">
<strong>Ravi Ortega</strong><small class="text-muted">yesterday</small>
</div>
<p class="mb-0 small">Bread is baked every morning and pasta is rolled by hand in our kitchen.</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-ink text-lg"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
</div>
<div class="text-2xl font-bold leading-none">
$36,998.21
</div>
<div class="small text-success-emphasis mt-1">
<i class="bi bi-arrow-up" aria-hidden="true"></i> +34% 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">
8.2k
</div>
<div class="small text-danger-emphasis 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.
Online
Away
<div class="flex gap-6 items-center">
<div class="relative inline-block">
<img src="../assets/img/avatar-10.svg" alt="Samir Silva" 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-9.svg" alt="Aria Fischer" 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.
Simple dishes, honest ingredients
Friendly people answer your questions quickly, by phone, chat or email.
Get started<div class="p-6 rounded-xl bg-primary-subtle text-center md:text-start">
<h3 class="h4 font-bold text-primary-emphasis">Simple dishes, honest ingredients</h3>
<p class="mb-4 text-primary-emphasis">Friendly people answer your questions quickly, by phone, chat or email.</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>Vegan options</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>Chef's specials</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>Chef's specials</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.
Children are always welcome, with a menu made just for them.
<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">Children are always welcome, with a menu made just for them.</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 16:15
</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>Taste the city's favourite kitchen</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 text-bg-primary small">All</span> <span class="px-4 py-1 rounded-full border small">news</span> <span class="px-4 py-1 rounded-full border small">Desserts</span> <span class="px-4 py-1 rounded-full border small">calm</span> <span class="px-4 py-1 rounded-full border small">launch</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-2.svg" alt="Grilled salmon" width="56" height="56" class="rounded-md object-cover shrink-0">
<div class="grow overflow-hidden">
<div class="font-medium truncate">
Grilled salmon - reliable edition
</div>
<div class="small text-muted">
Mains
</div>
</div>
<div class="font-bold whitespace-nowrap">
$24.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.
The small habits that make a big difference
Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it.
<div class="border rounded-xl p-2 md:p-6 bg-surface-3">
<h3 class="h6 mb-2 md:mb-4">The small habits that make a big difference</h3>
<p class="mb-0 small">Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it.</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="https://images.unsplash.com/photo-1538333581680-29dd4752ddf2?auto=format&fit=crop&w=1200&h=800&q=70" alt="Wood-fired, slow-cooked, unforgettable" 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">
Porto
</div>
<div class="font-semibold">
Seasonal menus from local farms
</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
Start in minutes and get help from a real person whenever you need it.
<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">Start in minutes and get help from a real person whenever you need it.</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>