Color & Background
The text-bg-* helpers set a theme background together with a readable, contrasting text colour in one class. Use them for badges, tiles, banners and status labels when you want the pairing to stay accessible in every colour scheme.
1Every theme colour as a badge
One text-bg-* class sets the background and a contrasting text colour together.
primarysecondarysuccessdangerwarninginfolightdark
<div class="flex flex-wrap gap-2">
<span class="badge text-bg-primary">primary</span><span class="badge text-bg-secondary">secondary</span><span class="badge text-bg-success">success</span><span class="badge text-bg-danger">danger</span><span class="badge text-bg-warning">warning</span><span class="badge text-bg-info">info</span><span class="badge text-bg-light">light</span><span class="badge text-bg-dark">dark</span>
</div>2Coloured cards
text-bg-* on a card colours the whole card and keeps the copy readable.
Volunteer programs
The new volunteer network makes projects moving forward without the usual hassle.
Disaster response
A calm routine helps every detail in view from the very first day.
Volunteer programs
This elegant goal brings your work organised in just a few clicks.
<div class="row g-3">
<div class="col-md-4">
<div class="card text-bg-primary h-full">
<div class="card-body">
<h3 class="h6 card-title">Volunteer programs</h3>
<p class="card-text small">The new volunteer network makes projects moving forward without the usual hassle.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-bg-success h-full">
<div class="card-body">
<h3 class="h6 card-title">Disaster response</h3>
<p class="card-text small">A calm routine helps every detail in view from the very first day.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-bg-dark h-full">
<div class="card-body">
<h3 class="h6 card-title">Volunteer programs</h3>
<p class="card-text small">This elegant goal brings your work organised in just a few clicks.</p>
</div>
</div>
</div>
</div>3Announcement banner
A full-width strip with text-bg-warning for a time-limited message.
<div class="text-bg-warning rounded-md p-4 flex flex-wrap items-center gap-2">
<span class="text-lg"><i class="bi bi-megaphone" aria-hidden="true"></i></span> <span class="me-auto"><strong>Heads up:</strong> scheduled maintenance on Nov 9, 2026 at 17:30.</span> <a class="btn btn-sm btn-dark" href="#">Details</a>
</div>4Status labels in a table
Invoice states shown with text-bg-* badges in a table cell.
| Invoice | Client | Amount | Status |
|---|---|---|---|
| #PO-7736 | Lea Kowalski | $856.30 | Paid |
| #INV-3047 | Ravi Mensah | $528.28 | Pending |
| #PO-5208 | Maya Duarte | $860.82 | Overdue |
| #ORD-6531 | Isla Harlow | $302.76 | Draft |
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col">Client</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#PO-7736</td>
<td>Lea Kowalski</td>
<td>$856.30</td>
<td><span class="badge text-bg-success">Paid</span></td>
</tr>
<tr>
<td>#INV-3047</td>
<td>Ravi Mensah</td>
<td>$528.28</td>
<td><span class="badge text-bg-warning">Pending</span></td>
</tr>
<tr>
<td>#PO-5208</td>
<td>Maya Duarte</td>
<td>$860.82</td>
<td><span class="badge text-bg-danger">Overdue</span></td>
</tr>
<tr>
<td>#ORD-6531</td>
<td>Isla Harlow</td>
<td>$302.76</td>
<td><span class="badge text-bg-secondary">Draft</span></td>
</tr>
</tbody>
</table>
</div>5Counters on avatars
Small text-bg-danger pills show unread counts on profile pictures.
8 unread messages
19 unread messages
9 unread messages<div class="flex gap-6">
<div class="relative">
<img src="../assets/img/avatar-4.svg" alt="Lea Haddad" width="48" height="48" class="rounded-full"><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-danger">8<span class="sr-only"> unread messages</span></span>
</div>
<div class="relative">
<img src="../assets/img/avatar-6.svg" alt="Finn Ashford" width="48" height="48" class="rounded-full"><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-danger">19<span class="sr-only"> unread messages</span></span>
</div>
<div class="relative">
<img src="../assets/img/avatar-5.svg" alt="Priya Kowalski" width="48" height="48" class="rounded-full"><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-danger">9<span class="sr-only"> unread messages</span></span>
</div>
</div>6Pricing header
A dark header band with text-bg-dark above a light pricing body.
Team
$56.87- Tax receipts
- Transparent reports
<div class="card overflow-hidden" style="max-width:20rem">
<div class="text-bg-dark p-4 text-center">
<h3 class="h6 uppercase mb-1">Team</h3>
<span class="display-6">$56.87</span>
</div>
<ul class="list-group list-group-flush small">
<li class="list-group-item">Tax receipts</li>
<li class="list-group-item">Transparent reports</li>
</ul>
</div>7Calendar day chips
Today in text-bg-primary, a booked day in text-bg-info and free days in text-bg-light.
Oct12
Oct13
Oct14
Oct15
Oct16
Oct17
Oct18
<div class="flex flex-wrap gap-2">
<div class="text-bg-light border rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>12</strong>
</div>
<div class="text-bg-light border rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>13</strong>
</div>
<div class="text-bg-primary rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>14</strong>
</div>
<div class="text-bg-light border rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>15</strong>
</div>
<div class="text-bg-info rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>16</strong>
</div>
<div class="text-bg-light border rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>17</strong>
</div>
<div class="text-bg-light border rounded-md text-center px-4 py-2">
<small class="block">Oct</small><strong>18</strong>
</div>
</div>8Checkout steps
Numbered step circles coloured by state: done, current and upcoming.
- Cart
- Address
- 3Payment
- 4Review
<ol class="list-unstyled flex flex-wrap gap-4 mb-0">
<li class="flex items-center gap-2"><span class="rounded-full inline-flex items-center justify-center font-semibold text-bg-success" style="width:2rem;height:2rem"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Cart</li>
<li class="flex items-center gap-2"><span class="rounded-full inline-flex items-center justify-center font-semibold text-bg-success" style="width:2rem;height:2rem"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Address</li>
<li class="flex items-center gap-2" aria-current="step"><span class="rounded-full inline-flex items-center justify-center font-semibold text-bg-primary" style="width:2rem;height:2rem">3</span>Payment</li>
<li class="flex items-center gap-2"><span class="rounded-full inline-flex items-center justify-center font-semibold text-bg-secondary" style="width:2rem;height:2rem">4</span>Review</li>
</ol>9Coloured toast
A toast-style message using text-bg-success for the whole box.
Your changes to clean water were saved.
<div class="toast show items-center text-bg-success border-0" role="status" aria-live="polite" aria-atomic="true">
<div class="flex">
<div class="toast-body">
<i class="bi bi-check-circle" aria-hidden="true"></i> Your changes to clean water were saved.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-ui-dismiss="toast" aria-label="Close"></button>
</div>
</div>10KPI tiles
Dashboard tiles where each metric gets its own theme background.
22.6k
Customers999
Revenue25.4k
Waiting13.9k
Reviews<div class="row g-3">
<div class="col-6 col-lg-3">
<div class="text-bg-primary rounded-lg p-4">
<div class="text-xl">
<i class="bi bi-people" aria-hidden="true"></i>
</div>
<div class="text-xl font-bold">
22.6k
</div>
<small>Customers</small>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-bg-success rounded-lg p-4">
<div class="text-xl">
<i class="bi bi-currency-dollar" aria-hidden="true"></i>
</div>
<div class="text-xl font-bold">
999
</div>
<small>Revenue</small>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-bg-warning rounded-lg p-4">
<div class="text-xl">
<i class="bi bi-hourglass-split" aria-hidden="true"></i>
</div>
<div class="text-xl font-bold">
25.4k
</div>
<small>Waiting</small>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-bg-info rounded-lg p-4">
<div class="text-xl">
<i class="bi bi-star" aria-hidden="true"></i>
</div>
<div class="text-xl font-bold">
13.9k
</div>
<small>Reviews</small>
</div>
</div>
</div>11Tinted backgrounds
text-bg-* respects --ui-bg-opacity, so one class gives lighter tints of the same colour.
100%
75%
50%
25%
10%
<div class="flex flex-wrap gap-2">
<div class="text-bg-primary rounded-md px-4 py-2 small" style="--ui-bg-opacity:1">
100%
</div>
<div class="text-bg-primary rounded-md px-4 py-2 small" style="--ui-bg-opacity:0.75">
75%
</div>
<div class="text-bg-primary rounded-md px-4 py-2 small" style="--ui-bg-opacity:0.5">
50%
</div>
<div class="text-bg-primary rounded-md px-4 py-2 small" style="--ui-bg-opacity:0.25">
25%
</div>
<div class="text-bg-primary rounded-md px-4 py-2 small" style="--ui-bg-opacity:0.1">
10%
</div>
</div>12Profile header
A cover band with text-bg-primary behind a profile name and actions.
Ava Tanaka
Project Manager · Montreal<div class="card overflow-hidden">
<div class="text-bg-primary p-6 flex flex-wrap items-center gap-4">
<img src="../assets/img/avatar-8.svg" alt="Ava Tanaka" width="64" height="64" class="rounded-full border border-3 border-white">
<div class="me-auto">
<h3 class="h5 mb-0">Ava Tanaka</h3>
<small>Project Manager · Montreal</small>
</div>
<button type="button" class="btn btn-light btn-sm">Message</button>
</div>
</div>13Keyboard shortcut legend
text-bg-dark and text-bg-light make neat key caps in a help panel.
- Ctrl + K
- Open search
- Esc
- Close dialog
- ?
- Show shortcuts
<dl class="row small mb-0">
<dt class="col-6 font-normal"><kbd class="text-bg-dark">Ctrl</kbd> + <kbd class="text-bg-dark">K</kbd></dt>
<dd class="col-6">Open search</dd>
<dt class="col-6 font-normal"><kbd class="text-bg-light border">Esc</kbd></dt>
<dd class="col-6">Close dialog</dd>
<dt class="col-6 font-normal"><kbd class="text-bg-light border">?</kbd></dt>
<dd class="col-6 mb-0">Show shortcuts</dd>
</dl>14Sale ribbon on a product
A text-bg-danger label positioned over a product image.
-38%
Tree planting
$256.50<div class="card" style="max-width:16rem">
<div class="relative">
<img src="../assets/img/product-5.svg" alt="Tree planting" class="card-img-top"> <span class="absolute top-0 start-0 m-2 px-2 py-1 rounded-md small font-semibold text-bg-danger">-38%</span>
</div>
<div class="card-body">
<h3 class="h6 mb-1">Tree planting</h3>
<span class="font-bold">$256.50</span>
</div>
</div>15Footer strip
A compact text-bg-dark footer with links that inherit the light text.
<footer class="text-bg-dark rounded-md p-4 flex flex-wrap gap-4 small">
<span>© 2026 Brand name 11</span> <a class="link-light" href="#">Privacy</a><a class="link-light" href="#">Terms</a><a class="link-light ms-auto" href="#">Contact</a>
</footer>16Activity timeline dots
Coloured icon dots make each activity type easy to spot.
- Friendly ways to improve your routine19 min ago
- The friendly project checklistyesterday
- What's new in animals21 min ago
- Focused ways to improve your plan43 min ago
<ul class="list-unstyled mb-0 vstack gap-4">
<li class="flex gap-4"><span class="text-bg-success rounded-full inline-flex items-center justify-center shrink-0" style="width:2rem;height:2rem"><i class="bi bi-check-lg" aria-hidden="true"></i></span><div><strong class="block small">Friendly ways to improve your routine</strong><small class="text-muted">19 min ago</small></div></li>
<li class="flex gap-4"><span class="text-bg-info rounded-full inline-flex items-center justify-center shrink-0" style="width:2rem;height:2rem"><i class="bi bi-chat" aria-hidden="true"></i></span><div><strong class="block small">The friendly project checklist</strong><small class="text-muted">yesterday</small></div></li>
<li class="flex gap-4"><span class="text-bg-warning rounded-full inline-flex items-center justify-center shrink-0" style="width:2rem;height:2rem"><i class="bi bi-pencil" aria-hidden="true"></i></span><div><strong class="block small">What's new in animals</strong><small class="text-muted">21 min ago</small></div></li>
<li class="flex gap-4"><span class="text-bg-secondary rounded-full inline-flex items-center justify-center shrink-0" style="width:2rem;height:2rem"><i class="bi bi-clock" aria-hidden="true"></i></span><div><strong class="block small">Focused ways to improve your plan</strong><small class="text-muted">43 min ago</small></div></li>
</ul>17Kanban card priorities
Priority labels in text-bg-* on small task cards.
High
A guide to food relief
Medium
The friendly workflow checklist
Low
What's new in health
<div class="row g-2">
<div class="col-sm-4">
<div class="border rounded-md p-2 small">
<span class="badge text-bg-danger mb-1">High</span>
<div>
A guide to food relief
</div>
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-md p-2 small">
<span class="badge text-bg-warning mb-1">Medium</span>
<div>
The friendly workflow checklist
</div>
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-md p-2 small">
<span class="badge text-bg-info mb-1">Low</span>
<div>
What's new in health
</div>
</div>
</div>
</div>18Chat bubbles
Incoming messages in text-bg-light, your own messages in text-bg-primary.
The new local partners guides decisions quicker and clearer for teams of every size.
The new transparent reports helps projects moving forward from the very first day.
The new impact tracking helps complex tasks into simple steps for teams of every size.
Our volunteer programs helps data easy to understand all year round.
<div class="vstack gap-2">
<div class="text-bg-light border self-start rounded-xl px-4 py-2 small" style="max-width:80%">
The new local partners guides decisions quicker and clearer for teams of every size.
</div>
<div class="text-bg-primary self-end rounded-xl px-4 py-2 small" style="max-width:80%">
The new transparent reports helps projects moving forward from the very first day.
</div>
<div class="text-bg-light border self-start rounded-xl px-4 py-2 small" style="max-width:80%">
The new impact tracking helps complex tasks into simple steps for teams of every size.
</div>
<div class="text-bg-primary self-end rounded-xl px-4 py-2 small" style="max-width:80%">
Our volunteer programs helps data easy to understand all year round.
</div>
</div>19List group highlights
text-bg-* on individual list items to flag the selected and the problem rows.
- Food relief
- Education fund (selected)
- Volunteer programs
- Education fund (failed)
<ul class="list-group">
<li class="list-group-item">Food relief</li>
<li class="list-group-item text-bg-primary" aria-current="true">Education fund (selected)</li>
<li class="list-group-item">Volunteer programs</li>
<li class="list-group-item text-bg-danger">Education fund (failed)</li>
</ul>20Code chip
Inline file names and commands on a text-bg-dark chip inside running text.
Run npm run build and upload the
dist folder to your server.
<p class="mb-0">Run <code class="text-bg-dark rounded-md px-2 py-1">npm run build</code> and upload the <span class="text-bg-secondary rounded-md px-2 py-1 small font-mono">dist</span> folder to your server.</p>