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.
30-day returns
Gift wrapping and a handwritten note are free on every order.
30-day returns
Each product is checked by hand before it goes into the box.
Loyalty rewards
Friendly people answer your questions quickly, by phone, chat or email.
<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">30-day returns</h3>
<p class="card-text small">Gift wrapping and a handwritten note are free on every order.</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">30-day returns</h3>
<p class="card-text small">Each product is checked by hand before it goes into the box.</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">Loyalty rewards</h3>
<p class="card-text small">Friendly people answer your questions quickly, by phone, chat or email.</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-fill" aria-hidden="true"></i></span> <span class="me-auto"><strong>Heads up:</strong> scheduled maintenance on Jan 15, 2027 at 07:45.</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-3864 | Noah Moreau | $183.35 | Paid |
| #PO-2276 | Freya Carter | $68.18 | Pending |
| #ORD-5572 | Lucas Morgan | $737.43 | Overdue |
| #TX-5958 | Elena Tanaka | $628.26 | 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-3864</td>
<td>Noah Moreau</td>
<td>$183.35</td>
<td><span class="badge text-bg-success">Paid</span></td>
</tr>
<tr>
<td>#PO-2276</td>
<td>Freya Carter</td>
<td>$68.18</td>
<td><span class="badge text-bg-warning">Pending</span></td>
</tr>
<tr>
<td>#ORD-5572</td>
<td>Lucas Morgan</td>
<td>$737.43</td>
<td><span class="badge text-bg-danger">Overdue</span></td>
</tr>
<tr>
<td>#TX-5958</td>
<td>Elena Tanaka</td>
<td>$628.26</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.
3 unread messages
8 unread messages
19 unread messages<div class="flex gap-6">
<div class="relative">
<img src="../assets/img/avatar-3.svg" alt="Ella Novak" 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">3<span class="sr-only"> unread messages</span></span>
</div>
<div class="relative">
<img src="../assets/img/avatar-4.svg" alt="Jonah Larsen" 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-10.svg" alt="Ethan Brennan" 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>6Pricing header
A dark header band with text-bg-dark above a light pricing body.
Team
$75.39- Easy exchanges
- Carbon-neutral delivery
<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">$75.39</span>
</div>
<ul class="list-group list-group-flush small">
<li class="list-group-item">Easy exchanges</li>
<li class="list-group-item">Carbon-neutral delivery</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 secure checkout 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-fill" aria-hidden="true"></i> Your changes to secure checkout 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.
32.5k
Customers26.3k
Revenue34.4k
Waiting3.5k
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-fill" aria-hidden="true"></i>
</div>
<div class="text-xl font-bold">
32.5k
</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">
26.3k
</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">
34.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-fill" aria-hidden="true"></i>
</div>
<div class="text-xl font-bold">
3.5k
</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. Put text on the full colour, labels beside the light tints.
100%
75%
50%
25%
10%
<div class="flex flex-wrap gap-4">
<div class="text-center small">
<div class="text-bg-primary rounded-md mb-1" style="width:4rem;height:2.5rem;--ui-bg-opacity:1">
</div>
100%
</div>
<div class="text-center small">
<div class="text-bg-primary rounded-md mb-1" style="width:4rem;height:2.5rem;--ui-bg-opacity:0.75">
</div>
75%
</div>
<div class="text-center small">
<div class="text-bg-primary rounded-md mb-1" style="width:4rem;height:2.5rem;--ui-bg-opacity:0.5">
</div>
50%
</div>
<div class="text-center small">
<div class="text-bg-primary rounded-md mb-1" style="width:4rem;height:2.5rem;--ui-bg-opacity:0.25">
</div>
25%
</div>
<div class="text-center small">
<div class="text-bg-primary rounded-md mb-1" style="width:4rem;height:2.5rem;--ui-bg-opacity:0.1">
</div>
10%
</div>
</div>12Profile header
A cover band with text-bg-primary behind a profile name and actions.
Maya Rossi
Product Designer · Vancouver<div class="card overflow-hidden">
<div class="text-bg-primary p-6 flex flex-wrap items-center gap-4">
<img src="../assets/img/avatar-9.svg" alt="Maya Rossi" width="64" height="64" class="rounded-full border border-3 border-white">
<div class="me-auto">
<h3 class="h5 mb-0">Maya Rossi</h3>
<small>Product Designer · Vancouver</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.
-33%
Canvas tote
$33.00<div class="card" style="max-width:16rem">
<div class="relative">
<img src="../assets/img/product-2.svg" alt="Canvas tote" 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">-33%</span>
</div>
<div class="card-body">
<h3 class="h6 mb-1">Canvas tote</h3>
<span class="font-bold">$33.00</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 Pixel Nest</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.
- A small guide to a calmer home3 days ago
- Inside our new autumn collection23 hours ago
- The small habits that make a big difference1 days ago
- Five things we learned this year19 hours 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">A small guide to a calmer home</strong><small class="text-muted">3 days 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-fill" aria-hidden="true"></i></span><div><strong class="block small">Inside our new autumn collection</strong><small class="text-muted">23 hours ago</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-fill" aria-hidden="true"></i></span><div><strong class="block small">The small habits that make a big difference</strong><small class="text-muted">1 days 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-fill" aria-hidden="true"></i></span><div><strong class="block small">Five things we learned this year</strong><small class="text-muted">19 hours ago</small></div></li>
</ul>17Kanban card priorities
Priority labels in text-bg-* on small task cards.
High
Meet the makers behind our ceramics
Medium
How to choose the right product
Low
Looking back at a busy season
<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>
Meet the makers behind our ceramics
</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>
How to choose the right product
</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>
Looking back at a busy season
</div>
</div>
</div>
</div>18Chat bubbles
Incoming messages in text-bg-light, your own messages in text-bg-primary.
We work directly with makers, so prices stay fair for everyone.
Clear prices, honest advice and no surprises along the way.
Thousands of shoppers already trust us, and we work hard to keep it that way.
Thousands of five-star reviews from customers who came back for more.
<div class="vstack gap-2">
<div class="text-bg-light border self-start rounded-xl px-4 py-2 small" style="max-width:80%">
We work directly with makers, so prices stay fair for everyone.
</div>
<div class="text-bg-primary self-end rounded-xl px-4 py-2 small" style="max-width:80%">
Clear prices, honest advice and no surprises along the way.
</div>
<div class="text-bg-light border self-start rounded-xl px-4 py-2 small" style="max-width:80%">
Thousands of shoppers already trust us, and we work hard to keep it that way.
</div>
<div class="text-bg-primary self-end rounded-xl px-4 py-2 small" style="max-width:80%">
Thousands of five-star reviews from customers who came back for more.
</div>
</div>19List group highlights
text-bg-* on individual list items to flag the selected and the problem rows.
- Loyalty rewards
- Secure checkout (selected)
- Live order tracking
- 30-day returns (failed)
<ul class="list-group">
<li class="list-group-item">Loyalty rewards</li>
<li class="list-group-item text-bg-primary" aria-current="true">Secure checkout (selected)</li>
<li class="list-group-item">Live order tracking</li>
<li class="list-group-item text-bg-danger">30-day returns (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>