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.

Secure file sharing

Start in minutes and get help from a real person whenever you need it.

Secure file sharing

We listen first, then build a plan around what you actually need.

API integrations

Our team has done this many times, so you never have to guess.

<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">Secure file sharing</h3>
        <p class="card-text small">Start in minutes and get help from a real person whenever you need it.</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">Secure file sharing</h3>
        <p class="card-text small">We listen first, then build a plan around what you actually need.</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">API integrations</h3>
        <p class="card-text small">Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

3Announcement banner

A full-width strip with text-bg-warning for a time-limited message.

Heads up: scheduled maintenance on Feb 11, 2027 at 12:15. Details

<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 Feb 11, 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
#TX-5815	Ava Patel	$896.25	Paid
#ORD-7270	Arjun Lindqvist	$900.79	Pending
#ORD-2460	Owen Silva	$623.40	Overdue
#PO-7263	Ravi Morgan	$830.24	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>#TX-5815</td>
        <td>Ava Patel</td>
        <td>$896.25</td>
        <td><span class="badge text-bg-success">Paid</span></td>
      </tr>
      <tr>
        <td>#ORD-7270</td>
        <td>Arjun Lindqvist</td>
        <td>$900.79</td>
        <td><span class="badge text-bg-warning">Pending</span></td>
      </tr>
      <tr>
        <td>#ORD-2460</td>
        <td>Owen Silva</td>
        <td>$623.40</td>
        <td><span class="badge text-bg-danger">Overdue</span></td>
      </tr>
      <tr>
        <td>#PO-7263</td>
        <td>Ravi Morgan</td>
        <td>$830.24</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.

<div class="flex gap-6">
  <div class="relative">
    <img src="../assets/img/avatar-1.svg" alt="Theo Rossi" 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">5<span class="sr-only"> unread messages</span></span>
  </div>
  <div class="relative">
    <img src="../assets/img/avatar-2.svg" alt="Ella 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-2.svg" alt="Diego Alvarez" 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">16<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

$98.14

Open API
Dark mode

<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">$98.14</span>
  </div>
  <ul class="list-group list-group-flush small">
    <li class="list-group-item">Open API</li>
    <li class="list-group-item">Dark mode</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 team analytics 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 team analytics 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.

19.2k

Customers

5.2k

Revenue

19.8k

Waiting

18.1k

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">
        19.2k
      </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">
        5.2k
      </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">
        19.8k
      </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">
        18.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. 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.

Noah Moreau

Art Director · Dublin

<div class="card overflow-hidden">
  <div class="text-bg-primary p-6 flex flex-wrap items-center gap-4">
    <img src="../assets/img/avatar-4.svg" alt="Noah Moreau" width="64" height="64" class="rounded-full border border-3 border-white"> 
    <div class="me-auto">
      <h3 class="h5 mb-0">Noah Moreau</h3>
      <small>Art Director &middot; Dublin</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.

-30%

Onboarding workshop

$398.00

<div class="card" style="max-width:16rem">
  <div class="relative">
    <img src="../assets/img/product-8.svg" alt="Onboarding workshop" 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">-30%</span> 
  </div>
  <div class="card-body">
    <h3 class="h6 mb-1">Onboarding workshop</h3>
    <span class="font-bold">$398.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>&copy; 2026 Halo Works</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 our customers asked us most5 days ago
What we learned shipping 200 releasesjust now
How to choose the right plan52 min ago
Planning a product launch in six weeks2 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">What our customers asked us most</strong><small class="text-muted">5 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" aria-hidden="true"></i></span><div><strong class="block small">What we learned shipping 200 releases</strong><small class="text-muted">just now</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">How to choose the right plan</strong><small class="text-muted">52 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">Planning a product launch in six weeks</strong><small class="text-muted">2 min ago</small></div></li>
</ul>

17Kanban card priorities

Priority labels in text-bg-* on small task cards.

High

A beginner's guide to getting started

Medium

How remote teams keep projects on track

Low

Five things we learned this year

<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 beginner&#39;s guide to getting started
      </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 remote teams keep projects on track
      </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>
        Five things we learned this year
      </div>
    </div>
  </div>
</div>

18Chat bubbles

Incoming messages in text-bg-light, your own messages in text-bg-primary.

Clear prices, honest advice and no surprises along the way.

Set up in an afternoon, connect the tools you use and invite your team.

Thousands of customers already trust us, and we work hard to keep it that way.

Start free, upgrade when you grow and cancel any time with one click.

<div class="vstack gap-2">
  <div class="text-bg-light border self-start 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-primary self-end rounded-xl px-4 py-2 small" style="max-width:80%">
    Set up in an afternoon, connect the tools you use and invite your team.
  </div>
  <div class="text-bg-light border self-start rounded-xl px-4 py-2 small" style="max-width:80%">
    Thousands of customers 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%">
    Start free, upgrade when you grow and cancel any time with one click.
  </div>
</div>

19List group highlights

text-bg-* on individual list items to flag the selected and the problem rows.

Single sign-on
Smart reporting (selected)
Workflow automation
Secure file sharing (failed)

<ul class="list-group">
  <li class="list-group-item">Single sign-on</li>
  <li class="list-group-item text-bg-primary" aria-current="true">Smart reporting (selected)</li>
  <li class="list-group-item">Workflow automation</li>
  <li class="list-group-item text-bg-danger">Secure file sharing (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>