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.
Recovery
Train smarter, feel better
Beginners are always welcome, with an intro session included.
<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">Recovery</p>
<h3 class="h5 mb-2">Train smarter, feel better</h3>
<p class="mb-0 text-body-secondary">Beginners are always welcome, with an intro session included.</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 (the labels sit under it, so they stay readable on every step).
<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.
- Nutrition plans --ui-link-opacity:.5, not available
- Certified coaches 100, 75 on hover
- Better habits start this week 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">Nutrition plans</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">Certified coaches</a> <span class="small text-body-secondary">100, 75 on hover</span></li>
<li><a href="#" class="link-danger link-underline-opacity-25">Better habits start this week</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.
Certified coaches design every session around your level and your goals.
<div class="d-flex gap-3 align-items-start border rounded-3 p-3">
<img src="../assets/img/avatar-12.svg" alt="Finn Ibrahim" width="48" height="48" class="rounded-circle flex-shrink-0">
<div class="flex-grow-1">
<div class="d-flex justify-content-between">
<strong>Finn Ibrahim</strong><small class="text-body-secondary">just now</small>
</div>
<p class="mb-0 small">Certified coaches design every session around your level and your goals.</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="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.
<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">
$27,942.30
</div>
<div class="small text-success mt-1">
<i class="bi bi-arrow-up" aria-hidden="true"></i> +78% 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">
8.8k
</div>
<div class="small text-danger mt-1">
<i class="bi bi-arrow-down" aria-hidden="true"></i> -8% 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="d-flex gap-4 align-items-center">
<div class="position-relative d-inline-block">
<img src="../assets/img/avatar-2.svg" alt="Ella Whitaker" 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-8.svg" alt="Arjun Ashford" 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.
<div class="p-4 rounded-4 bg-primary-subtle text-center text-md-start">
<h3 class="h4 fw-bold text-primary-emphasis">Stronger every single day</h3>
<p class="mb-3 text-primary-emphasis">Track your progress in the app and see how far you have come.</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="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>Certified coaches</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.
We measure success by how many members come back and tell their friends.
<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 measure success by how many members come back and tell their friends.</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-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 20: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.
<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>Classes that keep you coming back</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.
<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">community</span> <span class="px-3 py-1 rounded-pill border small">Cardio</span> <span class="px-3 py-1 rounded-pill border small">friendly</span> <span class="px-3 py-1 rounded-pill 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="d-flex align-items-center gap-3 border rounded-3 p-2" style="max-width:28rem">
<img src="../assets/img/product-7.svg" alt="Spin class pack" 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">
Spin class pack - reliable edition
</div>
<div class="small text-body-secondary">
Cardio
</div>
</div>
<div class="fw-bold text-nowrap">
$103.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.
HIIT twice a week: how hard is hard enough?
Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day.
<div class="border rounded-4 p-2 p-md-4 bg-body-tertiary">
<h3 class="h6 mb-2 mb-md-3">HIIT twice a week: how hard is hard enough?</h3>
<p class="mb-0 small">Track your progress in the app and see how far you have come. Open 24 hours, so you can train whenever it suits your day.</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.
<div class="position-relative rounded-4 overflow-hidden" style="max-width:26rem">
<img src="https://images.unsplash.com/photo-1507398941214-572c25f4b1dc?auto=format&fit=crop&w=1200&h=800&q=70" alt="Stronger every single day" 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">
Porto
</div>
<div class="fw-semibold">
Move more, stress less
</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="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">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" aria-hidden="true"></i> Upload</button>
</div>