Color System, Theme Palettes & Background Utilities

Bootstrap 5 features an expressive Contextual Color System conveying meaning, state, and visual priority across interfaces. From actionable primary buttons to danger alerts and subtle backgrounds, Bootstrap maps colors through Sass variables and runtime CSS custom properties (--bs-primary, --bs-body-color, etc.).

In this lesson, you will master the 8 core contextual theme colors, text color utilities, background classes, body colors, and subtle tint utilities.

┌─────────────────────────────────────────────────────────────────────────────┐
│                      Bootstrap 5 Theme Color Matrix                         │
├──────────────┬────────────────────────┬─────────────────────────────────────┤
│ Theme Color  │ Default Hex Code       │ Semantic Purpose                    │
├──────────────┼────────────────────────┼─────────────────────────────────────┤
│ Primary      │ #0d6efd (Blue)         │ Primary call-to-actions, active state│
│ Secondary    │ #6c757d (Gray)         │ Secondary actions, muted UI chrome  │
│ Success      │ #198754 (Green)        │ Confirmations, positive trends      │
│ Danger       │ #dc3545 (Red)          │ Errors, destructive actions, alerts │
│ Warning      │ #ffc107 (Yellow/Amber) │ Warnings, pending states, notices   │
│ Info         │ #0dcaf0 (Cyan)         │ Informational messages, tips        │
│ Light        │ #f8f9fa (Off-White)    │ Light cards, light mode accents     │
│ Dark         │ #212529 (Off-Black)    │ Dark navbars, dark mode backgrounds │
└──────────────┴────────────────────────┴─────────────────────────────────────┘

1. Contextual Text Colors

Apply theme colors to text using .text-{color}:

<p class="text-primary">.text-primary — Key highlights and primary text</p>
<p class="text-secondary">.text-secondary — Supporting muted text</p>
<p class="text-success">.text-success — Operation successful</p>
<p class="text-danger">.text-danger — Critical warning or error</p>
<p class="text-warning">.text-warning — Cautionary alert</p>
<p class="text-info">.text-info — Informational note</p>
<p class="text-light bg-dark p-2">.text-light — High contrast on dark surfaces</p>
<p class="text-dark">.text-dark — Dark high contrast text</p>
<p class="text-muted">.text-muted — Subdued text</p>
<p class="text-white bg-primary p-2">.text-white — Pure white text</p>

2. Contextual Background Utilities

Fill containers with background colors using .bg-{color}:

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>

3. Subtle Background & Border Tints (Bootstrap 5.3+)

Bootstrap 5.3 introduced subtle background tints (.bg-*-subtle) designed for alerts, badges, and soft card containers that adapt seamlessly across light and dark themes:

<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded">
  Subtle primary container with accessible high-contrast emphasis text.
</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis border border-success-subtle rounded">
  Subtle success container.
</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis border border-danger-subtle rounded">
  Subtle danger container.
</div>

4. Body Colors & Theme Adaptability

Bootstrap uses CSS custom properties to manage body foreground and background colors:

.text-body: Standard body text color.
.text-body-secondary: Secondary text color with lower opacity.
.text-body-tertiary: Tertiary text color for timestamps and captions.
.bg-body: Default body background.
.bg-body-secondary: Secondary background color (e.g. gray in light mode, dark gray in dark mode).
.bg-body-tertiary: Tertiary background surface.

<div class="bg-body-secondary p-4 rounded">
  <h4 class="text-body">Adapts to Light & Dark Modes</h4>
  <p class="text-body-secondary">This text dynamically updates its contrast level.</p>
</div>

5. Color Opacity Modifiers (`text-opacity-` & `bg-opacity-`)

Adjust foreground and background opacity dynamically using CSS custom property opacity helpers:

<!-- Text Opacity -->
<div class="text-primary">Default 100% text opacity</div>
<div class="text-primary text-opacity-75">75% text opacity</div>
<div class="text-primary text-opacity-50">50% text opacity</div>
<div class="text-primary text-opacity-25">25% text opacity</div>

<!-- Background Opacity -->
<div class="bg-success p-2 text-white mb-2">Default 100% bg opacity</div>
<div class="bg-success bg-opacity-75 p-2 text-white mb-2">75% bg opacity</div>
<div class="bg-success bg-opacity-50 p-2 text-white mb-2">50% bg opacity</div>
<div class="bg-success bg-opacity-25 p-2 text-dark">25% bg opacity</div>

Summary & Key Takeaways

8 core theme colors: primary, secondary, success, danger, warning, info, light, and dark.
Text utilities (text-primary, text-muted) and background utilities (bg-primary, bg-dark) format UI elements quickly.
Modern Bootstrap 5.3 adds .bg-*-subtle and .text-*-emphasis for accessible, soft-toned UI surfaces.
Body color utilities (text-body-secondary, bg-body-tertiary) automatically respect system color modes.
text-opacity-* and bg-opacity-* adjust alpha channels without altering base hex values.

Best Practices & Senior Guidance

Pair Subtle Backgrounds with Emphasis Text: Always pair .bg-primary-subtle with .text-primary-emphasis to ensure WCAG AA color contrast compliance.
Avoid Hardcoding Hex Codes: Use theme classes so your UI automatically switches between light and dark modes when data-bs-theme is applied.
Use bg-opacity-* for Overlay Backdrops: Provides soft tinted backgrounds while allowing foreground text to remain sharp.