Colors

Colour utilities set text and link colours from the theme: solid theme colours, -emphasis tones for text on subtle backgrounds, body levels for hierarchy and white or black alpha text for photos. text-opacity-* fades a colour, and text-reset lets a link inherit the colour of its parent.

1Theme text colours

text-primary to text-info colour text with the theme; text-body-emphasis is the strongest text colour in light and dark mode (text-dark stays dark).

text-primarytext-secondarytext-success text-dangertext-warningtext-infotext-body-emphasis

<div class="d-flex flex-wrap gap-3 fw-semibold">
  <span class="text-primary">text-primary</span><span class="text-secondary">text-secondary</span><span class="text-success">text-success</span> <span class="text-danger">text-danger</span><span class="text-warning">text-warning</span><span class="text-info">text-info</span><span class="text-body-emphasis">text-body-emphasis</span> 
</div>

2Emphasis colours

text-{colour}-emphasis is a darker (or in dark mode lighter) tone for text on subtle backgrounds.

text-primary-emphasis text-success-emphasis text-danger-emphasis text-warning-emphasis

<div class="d-grid gap-1">
  <span class="text-primary-emphasis">text-primary-emphasis</span> <span class="text-success-emphasis">text-success-emphasis</span> <span class="text-danger-emphasis">text-danger-emphasis</span> <span class="text-warning-emphasis">text-warning-emphasis</span> 
</div>

3Body text levels

text-body-emphasis, text-body, text-body-secondary and text-body-tertiary build a text hierarchy.

What our customers asked us most

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

Kenji Moreau

Last edited 36 min ago

<div>
  <div class="text-body-emphasis fw-semibold fs-5">
    What our customers asked us most
  </div>
  <div class="text-body">
    Clear prices, honest advice and no surprises along the way.
  </div>
  <div class="text-body-secondary small">
    Kenji Moreau
  </div>
  <div class="text-body-tertiary small">
    Last edited 36 min ago
  </div>
</div>

4Text opacity

text-opacity-25 to -100 fade a theme text colour.

text-opacity-100 text-opacity-75 text-opacity-50 text-opacity-25

Faded text drops below 4.5:1 - keep body copy at 100 and use the lighter steps for decoration or large display text.

<figure class="mb-0">
  <div inert>
    <div class="d-grid gap-1 fw-medium">
      <span class="text-primary text-opacity-100">text-opacity-100</span> <span class="text-primary text-opacity-75">text-opacity-75</span> <span class="text-primary text-opacity-50">text-opacity-50</span> <span class="text-primary text-opacity-25">text-opacity-25</span> 
    </div>
  </div>
  <figcaption class="small text-body-secondary mt-2 mb-0">Faded text drops below 4.5:1 - keep body copy at 100 and use the lighter steps for decoration or large display text.</figcaption>
</figure>

5White and black alpha text

text-white-50 and text-black-50 are half transparent fixed colours for large text on photos or solid fills.

One platform for every workflow

text-white-50

Work that moves itself forward

text-black-50

<div class="row g-2">
  <div class="col-sm-6">
    <div class="bg-dark rounded-3 p-3">
      <div class="text-white fw-semibold">
        One platform for every workflow
      </div>
      <div class="text-white-50 fs-4 fw-bold">
        text-white-50
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="bg-warning rounded-3 p-3">
      <div class="text-black fw-semibold">
        Work that moves itself forward
      </div>
      <div class="text-black-50 fs-4 fw-bold">
        text-black-50
      </div>
    </div>
  </div>
</div>

6Coloured links

link-{colour} colours links and darkens them on hover.

link-primary link-success link-danger link-secondary link-body-emphasis

<div class="d-flex flex-wrap gap-3">
  <a href="#" class="link-primary">link-primary</a><a href="#" class="link-success">link-success</a> <a href="#" class="link-danger">link-danger</a><a href="#" class="link-secondary">link-secondary</a> <a href="#" class="link-body-emphasis">link-body-emphasis</a> 
</div>

7Price with colours

Old price in text-body-tertiary with a line through, the new one in text-danger.

$40.11 $117.56 Save 36%

<div class="d-flex align-items-baseline gap-2">
  <span class="fs-3 fw-bold text-danger">$40.11</span> <span class="text-body-tertiary text-decoration-line-through">$117.56</span> <span class="small text-success fw-semibold">Save 36%</span> 
</div>

8Trend indicators

text-success and text-danger with arrows show change at a glance.

Visitors +21%
Bounce rate +1%
Avg. session 0%

<ul class="list-unstyled mb-0 d-grid gap-2" style="max-width:20rem">
  <li class="d-flex justify-content-between"><span>Visitors</span><span class="text-success fw-semibold"><i class="bi bi-arrow-up-right" aria-hidden="true"></i> +21%</span></li>
  <li class="d-flex justify-content-between"><span>Bounce rate</span><span class="text-danger fw-semibold"><i class="bi bi-arrow-up-right" aria-hidden="true"></i> +1%</span></li>
  <li class="d-flex justify-content-between"><span>Avg. session</span><span class="text-body-secondary fw-semibold"><i class="bi bi-dash" aria-hidden="true"></i> 0%</span></li>
</ul>

9Coloured icons

Icons inherit the text colour, so text-{colour} tints them too.

<div class="d-flex flex-wrap gap-3 fs-3">
  <span class="text-primary"><i class="bi bi-house-fill" aria-hidden="true"></i></span><span class="text-danger"><i class="bi bi-heart-fill" aria-hidden="true"></i></span><span class="text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span><span class="text-info"><i class="bi bi-info-circle-fill" aria-hidden="true"></i></span><span class="text-body-tertiary"><i class="bi bi-gear-fill" aria-hidden="true"></i></span> 
</div>

10Validation hints

Form hints coloured with text-success and text-danger.

Username

This name is available.

It must not contain spaces.

<div style="max-width:22rem">
  <label class="form-label" for="ut-user-1248">Username</label>
  <input id="ut-user-1248" type="text" class="form-control" value="nora"> 
  <div class="small text-success mt-1">
    <i class="bi bi-check2" aria-hidden="true"></i> This name is available.
  </div>
  <div class="small text-danger">
    <i class="bi bi-x" aria-hidden="true"></i> It must not contain spaces.
  </div>
</div>

11Reset inherited colour

text-reset makes a link take its parent's colour, so headings that are links do not turn blue.

The calm way to run a busy team

The link above uses text-reset.

<div class="text-success-emphasis bg-success-subtle rounded-3 p-3">
  <h3 class="h6 mb-1"><a href="#" class="text-reset">The calm way to run a busy team</a></h3>
  <p class="small mb-0">The link above uses <code>text-reset</code>.</p>
</div>

12Status labels with colour

Small coloured text with a dot icon works as a light status label.

Paid Due soon Overdue Draft

<div class="d-flex flex-wrap gap-3 small fw-medium">
  <span class="text-success"><i class="bi bi-circle-fill" aria-hidden="true"></i> Paid</span><span class="text-warning"><i class="bi bi-circle-fill" aria-hidden="true"></i> Due soon</span> <span class="text-danger"><i class="bi bi-circle-fill" aria-hidden="true"></i> Overdue</span><span class="text-body-secondary"><i class="bi bi-circle-fill" aria-hidden="true"></i> Draft</span> 
</div>

13Muted metadata

text-body-secondary keeps author, date and reading time quieter than the title.

Know what is happening, without asking

Arjun Kowalski Oct 20, 2025 9 min read

<article>
  <h3 class="h5 text-body-emphasis mb-1">Know what is happening, without asking</h3>
  <div class="small text-body-secondary d-flex flex-wrap gap-3">
    <span><i class="bi bi-person-fill" aria-hidden="true"></i> Arjun Kowalski</span><span><i class="bi bi-calendar-event-fill" aria-hidden="true"></i> Oct 20, 2025</span><span><i class="bi bi-clock-fill" aria-hidden="true"></i> 9 min read</span> 
  </div>
</article>

14Coloured headings

An eyebrow in text-primary above a body-emphasis heading.

Engineering

Fewer meetings, more finished work

Real-time dashboards show what is on track and what needs attention.

<div>
  <div class="text-primary text-uppercase small fw-bold">
    Engineering
  </div>
  <h3 class="text-body-emphasis fw-bold mb-1">Fewer meetings, more finished work</h3>
  <p class="text-body-secondary mb-0">Real-time dashboards show what is on track and what needs attention.</p>
</div>

15Rating stars

text-warning for filled stars and text-body-tertiary for empty ones.

4.0 (214)

<div class="d-flex align-items-center gap-2">
  <span class="text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span><span class="text-body-tertiary"><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="small text-body-secondary">4.0 (214)</span> 
</div>

16Colour on dark surfaces

On bg-dark use text-white, text-white-50 and link-light for a readable hierarchy.

Our favourite tips for busy weeks

Our open API and ready-made integrations fit into the stack you already have.

View details

<div class="bg-dark rounded-4 p-4">
  <div class="text-white fw-semibold fs-5">
    Our favourite tips for busy weeks
  </div>
  <p class="text-white-50 small">Our open API and ready-made integrations fit into the stack you already have.</p>
  <a href="#" class="link-light small">View details</a> 
</div>

17Code highlights

Coloured spans inside a code block make a simple key-value highlighter.

brand: "Yaraen Craft"
items: 28
active: true

<pre class="bg-body-tertiary border rounded-3 p-3 small mb-0"><code><span class="text-primary">brand</span>: <span class="text-success">"Yaraen Craft"</span> <span class="text-primary">items</span>: <span class="text-danger">28</span> <span class="text-primary">active</span>: <span class="text-warning">true</span></code></pre>

18Selected text colour in a menu

The current menu item uses text-primary and fw-semibold; others use link-body-emphasis.

<nav class="d-grid gap-1" style="max-width:14rem" aria-label="Account">
  <a href="#" class="text-primary fw-semibold text-decoration-none"><i class="bi bi-speedometer2" aria-hidden="true"></i> Dashboard</a> <a href="#" class="link-body-emphasis text-decoration-none"><i class="bi bi-bag-fill" aria-hidden="true"></i> Orders</a> <a href="#" class="link-body-emphasis text-decoration-none"><i class="bi bi-gear-fill" aria-hidden="true"></i> Settings</a> 
</nav>

19Big number colour

A colourful headline number with text-primary and a muted caption.

61.8k

happy customers in Edinburgh

<div class="text-center">
  <div class="display-5 fw-bold text-primary">
    61.8k
  </div>
  <div class="text-body-secondary small">
    happy customers in Edinburgh
  </div>
</div>

20Coloured border and text pairs

Outlined tags made with text-{colour} plus border-{colour}.

community insights update

<div class="d-flex flex-wrap gap-2 small">
  <span class="border border-primary text-primary rounded-2 px-2 py-1">community</span> <span class="border border-success text-success rounded-2 px-2 py-1">insights</span> <span class="border border-danger text-danger rounded-2 px-2 py-1">update</span> 
</div>