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.

Guided tours

Members get room upgrades and late check-out at selected hotels.

Airport transfers

Flexible dates help you find quieter weeks and better prices.

Guided tours

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

<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">Guided tours</h3>
        <p class="card-text small">Members get room upgrades and late check-out at selected hotels.</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">Airport transfers</h3>
        <p class="card-text small">Flexible dates help you find quieter weeks and better prices.</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">Guided tours</h3>
        <p class="card-text small">Clear prices, honest advice and no surprises along the way.</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 Jan 24, 2027 at 15:30. Details

<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 24, 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-9417	Liam Silva	$207.95	Paid
#INV-7676	Ava Brennan	$860.00	Pending
#TX-5058	Ravi Ibrahim	$631.01	Overdue
#INV-5734	Jonah Sato	$190.27	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-9417</td>
        <td>Liam Silva</td>
        <td>$207.95</td>
        <td><span class="badge text-bg-success">Paid</span></td>
      </tr>
      <tr>
        <td>#INV-7676</td>
        <td>Ava Brennan</td>
        <td>$860.00</td>
        <td><span class="badge text-bg-warning">Pending</span></td>
      </tr>
      <tr>
        <td>#TX-5058</td>
        <td>Ravi Ibrahim</td>
        <td>$631.01</td>
        <td><span class="badge text-bg-danger">Overdue</span></td>
      </tr>
      <tr>
        <td>#INV-5734</td>
        <td>Jonah Sato</td>
        <td>$190.27</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="d-flex gap-4">
  <div class="position-relative">
    <img src="../assets/img/avatar-2.svg" alt="Lucas Fischer" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">7<span class="visually-hidden"> unread messages</span></span>
  </div>
  <div class="position-relative">
    <img src="../assets/img/avatar-11.svg" alt="Priya Harlow" width="48" height="48" class="rounded-circle"><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">7<span class="visually-hidden"> unread messages</span></span>
  </div>
  <div class="position-relative">
    <img src="../assets/img/avatar-2.svg" alt="Ivy Alvarez" 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

$119.18

Best price guarantee
Free cancellation

<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">$119.18</span>
  </div>
  <ul class="list-group list-group-flush small">
    <li class="list-group-item">Best price guarantee</li>
    <li class="list-group-item">Free cancellation</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 guided tours 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 guided tours 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.

31.8k

Customers

7.4k

Revenue

9.7k

Waiting

12.7k

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">
        31.8k
      </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">
        7.4k
      </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">
        9.7k
      </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">
        12.7k
      </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.

Sofia Novak

Data Analyst · Oslo

<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-10.svg" alt="Sofia Novak" width="64" height="64" class="rounded-circle border border-3 border-white"> 
    <div class="me-auto">
      <h3 class="h5 mb-0">Sofia Novak</h3>
      <small>Data Analyst &middot; Oslo</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.

-12%

Food tour

$86.00

<div class="card" style="max-width:16rem">
  <div class="position-relative">
    <img src="../assets/img/product-7.svg" alt="Food tour" 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">-12%</span> 
  </div>
  <div class="card-body">
    <h3 class="h6 mb-1">Food tour</h3>
    <span class="fw-bold">$86.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>&copy; 2026 Tideio</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.

Travelling with kids: our tried and tested tips6 hours ago
Looking back at a busy seasonjust now
A beginner's guide to getting started15 hours ago
Three days in Lisbon, hour by houryesterday

<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">Travelling with kids: our tried and tested tips</strong><small class="text-body-secondary">6 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">Looking back at a busy season</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">A beginner&#39;s guide to getting started</strong><small class="text-body-secondary">15 hours 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">Three days in Lisbon, hour by hour</strong><small class="text-body-secondary">yesterday</small></div></li>
</ul>

17Kanban card priorities

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

High

Our favourite small hotels this year

Medium

Ten weekend escapes within two hours of home

Low

A first-timer's guide to safari

<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>
        Our favourite small hotels this year
      </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>
        Ten weekend escapes within two hours of home
      </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>
        A first-timer&#39;s guide to safari
      </div>
    </div>
  </div>
</div>

18Chat bubbles

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

Our travel experts are on call around the clock while you are away.

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

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

Every hotel on our list is visited and reviewed by our own travel 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%">
    Our travel experts are on call around the clock while you are away.
  </div>
  <div class="text-bg-primary align-self-end rounded-4 px-3 py-2 small" style="max-width:80%">
    Thousands of travellers already trust us, and we work hard to keep it that way.
  </div>
  <div class="text-bg-light border align-self-start rounded-4 px-3 py-2 small" style="max-width:80%">
    Start in minutes and get help from a real person whenever you need it.
  </div>
  <div class="text-bg-primary align-self-end rounded-4 px-3 py-2 small" style="max-width:80%">
    Every hotel on our list is visited and reviewed by our own travel team.
  </div>
</div>

19List group highlights

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

Airport transfers
Holiday packages (selected)
Guided tours
Hotel booking (failed)

<ul class="list-group">
  <li class="list-group-item">Airport transfers</li>
  <li class="list-group-item text-bg-primary" aria-current="true">Holiday packages (selected)</li>
  <li class="list-group-item">Guided tours</li>
  <li class="list-group-item text-bg-danger">Hotel booking (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>