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="d-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.
Multi-currency wallets
The new instant notifications lets the whole team on the same page with friendly support.
Payroll
Our business accounts makes your work organised at a fair price.
Payroll
A reliable story gives results you can measure from the very first day.
<div class="row g-3">
<div class="col-md-4">
<div class="card text-bg-primary h-100">
<div class="card-body">
<h3 class="h6 card-title">Multi-currency wallets</h3>
<p class="card-text small">The new instant notifications lets the whole team on the same page with friendly support.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-bg-success h-100">
<div class="card-body">
<h3 class="h6 card-title">Payroll</h3>
<p class="card-text small">Our business accounts makes your work organised at a fair price.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-bg-dark h-100">
<div class="card-body">
<h3 class="h6 card-title">Payroll</h3>
<p class="card-text small">A reliable story gives results you can measure from the very first day.</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 p-3 d-flex flex-wrap align-items-center gap-2">
<span class="fs-5"><i class="bi bi-megaphone" aria-hidden="true"></i></span> <span class="me-auto"><strong>Heads up:</strong> scheduled maintenance on Jan 21, 2027 at 12:15.</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 |
|---|---|---|---|
| #ORD-6422 | Finn Morgan | $831.00 | Paid |
| #ORD-8843 | Freya Morgan | $645.71 | Pending |
| #INV-4460 | Samir Kowalski | $682.96 | Overdue |
| #PO-5238 | Theo Haddad | $622.41 | 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>#ORD-6422</td>
<td>Finn Morgan</td>
<td>$831.00</td>
<td><span class="badge text-bg-success">Paid</span></td>
</tr>
<tr>
<td>#ORD-8843</td>
<td>Freya Morgan</td>
<td>$645.71</td>
<td><span class="badge text-bg-warning">Pending</span></td>
</tr>
<tr>
<td>#INV-4460</td>
<td>Samir Kowalski</td>
<td>$682.96</td>
<td><span class="badge text-bg-danger">Overdue</span></td>
</tr>
<tr>
<td>#PO-5238</td>
<td>Theo Haddad</td>
<td>$622.41</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
18 unread messages
9 unread messages<div class="d-flex gap-4">
<div class="position-relative">
<img src="../assets/img/avatar-5.svg" alt="Theo Moreau" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">3<span class="visually-hidden"> unread messages</span></span>
</div>
<div class="position-relative">
<img src="../assets/img/avatar-11.svg" alt="Omar Mensah" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">18<span class="visually-hidden"> unread messages</span></span>
</div>
<div class="position-relative">
<img src="../assets/img/avatar-6.svg" alt="Jonah Mensah" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">9<span class="visually-hidden"> unread messages</span></span>
</div>
</div>6Pricing header
A dark header band with text-bg-dark above a light pricing body.
Team
$120.82- Instant notifications
- Spending limits
<div class="card overflow-hidden" style="max-width:20rem">
<div class="text-bg-dark p-3 text-center">
<h3 class="h6 text-uppercase mb-1">Team</h3>
<span class="display-6">$120.82</span>
</div>
<ul class="list-group list-group-flush small">
<li class="list-group-item">Instant notifications</li>
<li class="list-group-item">Spending limits</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="d-flex flex-wrap gap-2">
<div class="text-bg-light border rounded text-center px-3 py-2">
<small class="d-block">Oct</small><strong>12</strong>
</div>
<div class="text-bg-light border rounded text-center px-3 py-2">
<small class="d-block">Oct</small><strong>13</strong>
</div>
<div class="text-bg-primary rounded text-center px-3 py-2">
<small class="d-block">Oct</small><strong>14</strong>
</div>
<div class="text-bg-light border rounded text-center px-3 py-2">
<small class="d-block">Oct</small><strong>15</strong>
</div>
<div class="text-bg-info rounded text-center px-3 py-2">
<small class="d-block">Oct</small><strong>16</strong>
</div>
<div class="text-bg-light border rounded text-center px-3 py-2">
<small class="d-block">Oct</small><strong>17</strong>
</div>
<div class="text-bg-light border rounded text-center px-3 py-2">
<small class="d-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 d-flex flex-wrap gap-3 mb-0">
<li class="d-flex align-items-center gap-2"><span class="rounded-circle d-inline-flex align-items-center justify-content-center fw-semibold text-bg-success" style="width:2rem;height:2rem"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Cart</li>
<li class="d-flex align-items-center gap-2"><span class="rounded-circle d-inline-flex align-items-center justify-content-center fw-semibold text-bg-success" style="width:2rem;height:2rem"><i class="bi bi-check-lg" aria-hidden="true"></i></span>Address</li>
<li class="d-flex align-items-center gap-2" aria-current="step"><span class="rounded-circle d-inline-flex align-items-center justify-content-center fw-semibold text-bg-primary" style="width:2rem;height:2rem">3</span>Payment</li>
<li class="d-flex align-items-center gap-2"><span class="rounded-circle d-inline-flex align-items-center justify-content-center fw-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 business accounts were saved.
<div class="toast show align-items-center text-bg-success border-0" role="status" aria-live="polite" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<i class="bi bi-check-circle" aria-hidden="true"></i> Your changes to business accounts 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.
36.2k
Customers17.3k
Revenue14.0k
Waiting11.1k
Reviews<div class="row g-3">
<div class="col-6 col-lg-3">
<div class="text-bg-primary rounded-3 p-3">
<div class="fs-4">
<i class="bi bi-people" aria-hidden="true"></i>
</div>
<div class="fs-4 fw-bold">
36.2k
</div>
<small>Customers</small>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-bg-success rounded-3 p-3">
<div class="fs-4">
<i class="bi bi-currency-dollar" aria-hidden="true"></i>
</div>
<div class="fs-4 fw-bold">
17.3k
</div>
<small>Revenue</small>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-bg-warning rounded-3 p-3">
<div class="fs-4">
<i class="bi bi-hourglass-split" aria-hidden="true"></i>
</div>
<div class="fs-4 fw-bold">
14.0k
</div>
<small>Waiting</small>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="text-bg-info rounded-3 p-3">
<div class="fs-4">
<i class="bi bi-star" aria-hidden="true"></i>
</div>
<div class="fs-4 fw-bold">
11.1k
</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="d-flex flex-wrap gap-2">
<div class="text-bg-primary rounded px-3 py-2 small" style="--ui-bg-opacity:1">
100%
</div>
<div class="text-bg-primary rounded px-3 py-2 small" style="--ui-bg-opacity:0.75">
75%
</div>
<div class="text-bg-primary rounded px-3 py-2 small" style="--ui-bg-opacity:0.5">
50%
</div>
<div class="text-bg-primary rounded px-3 py-2 small" style="--ui-bg-opacity:0.25">
25%
</div>
<div class="text-bg-primary rounded px-3 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.
Liam Kowalski
Backend Engineer · Edinburgh<div class="card overflow-hidden">
<div class="text-bg-primary p-4 d-flex flex-wrap align-items-center gap-3">
<img src="../assets/img/avatar-6.svg" alt="Liam Kowalski" width="64" height="64" class="rounded-circle border border-3 border-white">
<div class="me-auto">
<h3 class="h5 mb-0">Liam Kowalski</h3>
<small>Backend Engineer · Edinburgh</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 fw-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 fw-normal"><kbd class="text-bg-light border">Esc</kbd></dt>
<dd class="col-6">Close dialog</dd>
<dt class="col-6 fw-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.
-28%
Savings vault
$470.50<div class="card" style="max-width:16rem">
<div class="position-relative">
<img src="../assets/img/product-2.svg" alt="Savings vault" class="card-img-top"> <span class="position-absolute top-0 start-0 m-2 px-2 py-1 rounded small fw-semibold text-bg-danger">-28%</span>
</div>
<div class="card-body">
<h3 class="h6 mb-1">Savings vault</h3>
<span class="fw-bold">$470.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 p-3 d-flex flex-wrap gap-3 small">
<span>© 2026 Brand name 13</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.
- What's new in payroll5 days ago
- Inside the fast idea18 hours ago
- A guide to invoicingyesterday
- How we rebuilt our experience15 hours ago
<ul class="list-unstyled mb-0 vstack gap-3">
<li class="d-flex gap-3"><span class="text-bg-success rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width:2rem;height:2rem"><i class="bi bi-check-lg" aria-hidden="true"></i></span><div><strong class="d-block small">What's new in payroll</strong><small class="text-body-secondary">5 days ago</small></div></li>
<li class="d-flex gap-3"><span class="text-bg-info rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width:2rem;height:2rem"><i class="bi bi-chat" aria-hidden="true"></i></span><div><strong class="d-block small">Inside the fast idea</strong><small class="text-body-secondary">18 hours ago</small></div></li>
<li class="d-flex gap-3"><span class="text-bg-warning rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width:2rem;height:2rem"><i class="bi bi-pencil" aria-hidden="true"></i></span><div><strong class="d-block small">A guide to invoicing</strong><small class="text-body-secondary">yesterday</small></div></li>
<li class="d-flex gap-3"><span class="text-bg-secondary rounded-circle d-inline-flex align-items-center justify-content-center flex-shrink-0" style="width:2rem;height:2rem"><i class="bi bi-clock" aria-hidden="true"></i></span><div><strong class="d-block small">How we rebuilt our experience</strong><small class="text-body-secondary">15 hours ago</small></div></li>
</ul>17Kanban card priorities
Priority labels in text-bg-* on small task cards.
High
Project notes for members
Medium
Inside the reliable process
Low
How we rebuilt our plan
<div class="row g-2">
<div class="col-sm-4">
<div class="border rounded p-2 small">
<span class="badge text-bg-danger mb-1">High</span>
<div>
Project notes for members
</div>
</div>
</div>
<div class="col-sm-4">
<div class="border rounded p-2 small">
<span class="badge text-bg-warning mb-1">Medium</span>
<div>
Inside the reliable process
</div>
</div>
</div>
<div class="col-sm-4">
<div class="border rounded p-2 small">
<span class="badge text-bg-info mb-1">Low</span>
<div>
How we rebuilt our plan
</div>
</div>
</div>
</div>18Chat bubbles
Incoming messages in text-bg-light, your own messages in text-bg-primary.
Our multi-currency wallets keeps the whole team on the same page from the very first day.
The new instant notifications brings the whole team on the same page at a fair price.
This secure process connects data easy to understand in just a few clicks.
A focused plan gives every detail in view without the usual hassle.
<div class="vstack gap-2">
<div class="text-bg-light border align-self-start rounded-4 px-3 py-2 small" style="max-width:80%">
Our multi-currency wallets keeps the whole team on the same page from the very first day.
</div>
<div class="text-bg-primary align-self-end rounded-4 px-3 py-2 small" style="max-width:80%">
The new instant notifications brings the whole team on the same page at a fair price.
</div>
<div class="text-bg-light border align-self-start rounded-4 px-3 py-2 small" style="max-width:80%">
This secure process connects data easy to understand in just a few clicks.
</div>
<div class="text-bg-primary align-self-end rounded-4 px-3 py-2 small" style="max-width:80%">
A focused plan gives every detail in view without the usual hassle.
</div>
</div>19List group highlights
text-bg-* on individual list items to flag the selected and the problem rows.
- Business accounts
- Corporate cards (selected)
- Payroll
- Business accounts (failed)
<ul class="list-group">
<li class="list-group-item">Business accounts</li>
<li class="list-group-item text-bg-primary" aria-current="true">Corporate cards (selected)</li>
<li class="list-group-item">Payroll</li>
<li class="list-group-item text-bg-danger">Business accounts (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 px-2 py-1">npm run build</code> and upload the <span class="text-bg-secondary rounded px-2 py-1 small font-monospace">dist</span> folder to your server.</p>