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.
Single sign-on
Your data is encrypted, backed up daily and hosted in the region you choose.
Secure file sharing
We keep things simple, so you can focus on what matters to you.
API integrations
Every detail is handled by people who care about getting it right.
<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">Single sign-on</h3>
<p class="card-text small">Your data is encrypted, backed up daily and hosted in the region you choose.</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">Secure file sharing</h3>
<p class="card-text small">We keep things simple, so you can focus on what matters to you.</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">API integrations</h3>
<p class="card-text small">Every detail is handled by people who care about getting it right.</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 Feb 1, 2027 at 15: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 |
|---|---|---|---|
| #INV-3715 | Lea Novak | $405.46 | Paid |
| #PO-3779 | Luna Nguyen | $723.66 | Pending |
| #PO-3733 | Kai Harlow | $605.90 | Overdue |
| #ORD-6676 | Priya Mensah | $124.62 | 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>#INV-3715</td>
<td>Lea Novak</td>
<td>$405.46</td>
<td><span class="badge text-bg-success">Paid</span></td>
</tr>
<tr>
<td>#PO-3779</td>
<td>Luna Nguyen</td>
<td>$723.66</td>
<td><span class="badge text-bg-warning">Pending</span></td>
</tr>
<tr>
<td>#PO-3733</td>
<td>Kai Harlow</td>
<td>$605.90</td>
<td><span class="badge text-bg-danger">Overdue</span></td>
</tr>
<tr>
<td>#ORD-6676</td>
<td>Priya Mensah</td>
<td>$124.62</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.
11 unread messages
10 unread messages6 unread messages<div class="d-flex gap-4">
<div class="position-relative">
<img src="../assets/img/avatar-3.svg" alt="Mateo Morgan" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">11<span class="visually-hidden"> unread messages</span></span>
</div>
<div class="position-relative">
<img src="../assets/img/avatar-8.svg" alt="Finn Rossi" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">10<span class="visually-hidden"> unread messages</span></span>
</div>
<div class="position-relative">
<img src="../assets/img/avatar-8.svg" alt="Sofia Varga" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">6<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
$100.58- Audit trail
- Real-time collaboration
<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">$100.58</span>
</div>
<ul class="list-group list-group-flush small">
<li class="list-group-item">Audit trail</li>
<li class="list-group-item">Real-time collaboration</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 single sign-on 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 single sign-on 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.
10.1k
Customers22.6k
Revenue10.0k
Waiting1.6k
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">
10.1k
</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">
22.6k
</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">
10.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">
1.6k
</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="d-flex flex-wrap gap-3">
<div class="text-center small">
<div class="text-bg-primary rounded 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 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 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 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 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.
Tariq Hughes
Art Director · Copenhagen<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-12.svg" alt="Tariq Hughes" width="64" height="64" class="rounded-circle border border-3 border-white">
<div class="me-auto">
<h3 class="h5 mb-0">Tariq Hughes</h3>
<small>Art Director · Copenhagen</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.
-24%
Business plan
$47.00<div class="card" style="max-width:16rem">
<div class="position-relative">
<img src="../assets/img/product-3.svg" alt="Business plan" 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">-24%</span>
</div>
<div class="card-body">
<h3 class="h6 mb-1">Business plan</h3>
<span class="fw-bold">$47.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 p-3 d-flex flex-wrap gap-3 small">
<span>© 2026 Brio</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.
- How one support team cut first replies to 20 minutes10 hours ago
- What we learned shipping 200 releasesjust now
- Seven automations every team should set up53 min ago
- The small habits that make a big differencejust now
<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">How one support team cut first replies to 20 minutes</strong><small class="text-body-secondary">10 hours 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">What we learned shipping 200 releases</strong><small class="text-body-secondary">just now</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">Seven automations every team should set up</strong><small class="text-body-secondary">53 min ago</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">The small habits that make a big difference</strong><small class="text-body-secondary">just now</small></div></li>
</ul>17Kanban card priorities
Priority labels in text-bg-* on small task cards.
High
Looking back at a busy season
Medium
Our favourite tips for busy weeks
Low
How remote teams keep projects on track
<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>
Looking back at a busy season
</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>
Our favourite tips for busy weeks
</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 remote teams keep projects on track
</div>
</div>
</div>
</div>18Chat bubbles
Incoming messages in text-bg-light, your own messages in text-bg-primary.
Plan projects, track progress and share updates without another status meeting.
Teams report saving around five hours a week after the first month.
Automations take care of the repetitive steps, so people can focus on real work.
Set up in an afternoon, connect the tools you use and invite your team.
<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%">
Plan projects, track progress and share updates without another status meeting.
</div>
<div class="text-bg-primary align-self-end rounded-4 px-3 py-2 small" style="max-width:80%">
Teams report saving around five hours a week after the first month.
</div>
<div class="text-bg-light border align-self-start rounded-4 px-3 py-2 small" style="max-width:80%">
Automations take care of the repetitive steps, so people can focus on real work.
</div>
<div class="text-bg-primary align-self-end rounded-4 px-3 py-2 small" style="max-width:80%">
Set up in an afternoon, connect the tools you use and invite your team.
</div>
</div>19List group highlights
text-bg-* on individual list items to flag the selected and the problem rows.
- Workflow automation
- Single sign-on (selected)
- Team analytics
- Team analytics (failed)
<ul class="list-group">
<li class="list-group-item">Workflow automation</li>
<li class="list-group-item text-bg-primary" aria-current="true">Single sign-on (selected)</li>
<li class="list-group-item">Team analytics</li>
<li class="list-group-item text-bg-danger">Team analytics (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>