Bootstrap 5 Color Utilities — Text, Background and Border Colors

Bootstrap 5 has a complete system for applying colors to text, backgrounds and borders through utility classes. Bootstrap 5.3 extended this with CSS custom properties that make custom colors easier than ever.

The Color Palette

Bootstrap 5's theme colors:

Text Color Utilities

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success — green</p>
<p class="text-danger">Danger — red</p>
<p class="text-warning">Warning — yellow</p>
<p class="text-info">Info — cyan</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-white bg-secondary">White text</p>
<p class="text-muted">Muted / subdued text</p>
<p class="text-body">Default body text color</p>
<p class="text-black-50">Black at 50% opacity</p>
<p class="text-white-50 bg-dark">White at 50% opacity</p>

Bootstrap 5.3 semantic colors (adapt to dark mode automatically):

<p class="text-body-secondary">Secondary — adapts to dark mode</p>
<p class="text-body-tertiary">Tertiary — even more subtle</p>
<p class="text-body-emphasis">High emphasis text</p>

Background Color Utilities

<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-secondary text-white p-3">Secondary background</div>
<div class="bg-success text-white p-3">Success background</div>
<div class="bg-danger text-white p-3">Danger background</div>
<div class="bg-warning text-dark p-3">Warning background</div>
<div class="bg-info text-dark p-3">Info background</div>
<div class="bg-light text-dark p-3">Light background</div>
<div class="bg-dark text-white p-3">Dark background</div>
<div class="bg-white border p-3">White background</div>
<div class="bg-transparent border p-3">Transparent</div>
<div class="bg-body p-3">Body background color</div>

Subtle Backgrounds (Bootstrap 5.3)

Bootstrap 5.3 added -subtle variants — soft tinted backgrounds that look great for alert-style panels:

<div class="bg-primary-subtle text-primary-emphasis p-3 rounded">Primary subtle</div>
<div class="bg-success-subtle text-success-emphasis p-3 rounded">Success subtle</div>
<div class="bg-danger-subtle text-danger-emphasis p-3 rounded">Danger subtle</div>
<div class="bg-warning-subtle text-warning-emphasis p-3 rounded">Warning subtle</div>
<div class="bg-info-subtle text-info-emphasis p-3 rounded">Info subtle</div>

These are excellent for notification cards and status badges where you want a hint of color without full saturation.

Background Opacity

Control transparency of background utilities with bg-opacity-*:

<div class="bg-primary bg-opacity-100 p-2">100% — fully solid</div>
<div class="bg-primary bg-opacity-75 p-2">75% opacity</div>
<div class="bg-primary bg-opacity-50 p-2">50% opacity</div>
<div class="bg-primary bg-opacity-25 p-2">25% opacity</div>
<div class="bg-primary bg-opacity-10 p-2">10% — very light tint</div>

bg-opacity-10 is particularly useful for icon backgrounds in stat cards:

<div class="rounded-2 d-flex align-items-center justify-content-center"
  style="width:40px;height:40px;"
  class="bg-danger bg-opacity-10">
  <i class="bi bi-currency-dollar text-danger"></i>
</div>

Border Color Utilities

<div class="border border-primary p-3">Primary border</div>
<div class="border border-success p-3">Success border</div>
<div class="border border-danger p-3">Danger border</div>
<div class="border border-warning p-3">Warning border</div>

<!-- Border opacity -->
<div class="border border-primary border-opacity-10 p-3">10% opacity border</div>
<div class="border border-primary border-opacity-25 p-3">25% opacity border</div>
<div class="border border-primary border-opacity-50 p-3">50% opacity border</div>

Text Opacity

<p class="text-primary text-opacity-100">Full opacity</p>
<p class="text-primary text-opacity-75">75%</p>
<p class="text-primary text-opacity-50">50%</p>
<p class="text-primary text-opacity-25">25%</p>

Gradient Backgrounds

<!-- Bootstrap gradient utility (adds a CSS gradient overlay) -->
<div class="bg-primary bg-gradient text-white p-4">Primary with gradient</div>
<div class="bg-success bg-gradient text-white p-4">Success with gradient</div>
<div class="bg-danger bg-gradient text-white p-4">Danger with gradient</div>

For custom gradients use inline style or CSS:

<div class="p-4 text-white rounded"
  style="background: linear-gradient(135deg, #fd4766, #c0302e);">
  Custom gradient
</div>

Customising Colors with CSS Variables (Bootstrap 5.3)

Bootstrap 5.3 exposes all theme colors as CSS custom properties. Override them to change your entire color scheme:

/* Override Bootstrap's primary color */
:root {
  --bs-primary: #fd4766;
  --bs-primary-rgb: 253, 71, 102;
  --bs-link-color: #fd4766;
  --bs-link-hover-color: #c0302e;
}

After this override, all classes using primary — text-primary, bg-primary, border-primary, btn-primary — pick up your custom color. No Sass compilation needed.

Customising Colors via Sass (Full Control)

For deep customisation including generating the subtle variants and emphasis colors:

// Override before importing Bootstrap
$primary: #fd4766;
$success: #10b981;
$danger: #ef4444;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

This generates all the utility classes, button variants, form states and component colors from your custom values.

Practical Color Patterns

<!-- Status badge with semantic color -->
<span class="badge bg-success">Active</span>
<span class="badge bg-warning text-dark">Pending</span>
<span class="badge bg-danger">Failed</span>

<!-- Tinted card (subtle background) -->
<div class="card border-0 bg-primary-subtle">
  <div class="card-body">
    <p class="text-primary-emphasis fw-semibold mb-1">Info</p>
    <p class="text-body-secondary small mb-0">This uses Bootstrap 5.3 subtle colors.</p>
  </div>
</div>

<!-- Color-coded table rows -->
<tr class="table-success"><td>Completed order</td></tr>
<tr class="table-warning"><td>Pending order</td></tr>
<tr class="table-danger"><td>Failed order</td></tr>

<!-- Progress bar colors -->
<div class="progress"><div class="progress-bar bg-success" style="width:75%"></div></div>
<div class="progress"><div class="progress-bar bg-warning" style="width:50%"></div></div>
<div class="progress"><div class="progress-bar bg-danger" style="width:25%"></div></div>

Which Color Approach to Use