Colors & Color System

Prev Next

Almost every colored thing in Bootstrap 5 — buttons, alerts, badges, borders, text — pulls from the same eight-color theme palette. Learn this palette once and it explains btn-primary, alert-danger, bg-success, text-warning and dozens of other classes you'll meet across the rest of this track — they all just glue a component name to one of these eight color keywords.

1. The Theme Color Palette

Eight keywords cover every semantic color in the framework. Memorize these and you can predict the class name for almost any colored component.

Keyword	Default hex	Meant for
`primary`	#0d6efd	Main brand color, primary actions
`secondary`	#6c757d	Neutral, less prominent actions
`success`	#198754	Positive outcomes, confirmations
`danger`	#dc3545	Errors, destructive actions
`warning`	#ffc107	Caution, needs attention
`info`	#0dcaf0	Neutral, informational notices
`light`	#f8f9fa	Light backgrounds / surfaces
`dark`	#212529	Dark backgrounds / surfaces

2. .text-{color} and .bg-{color} Utilities

Every keyword above becomes a text-color utility (.text-{color}) and a background-color utility (.bg-{color}) simply by pattern. Bootstrap also auto-picks readable foreground text on most .bg-* classes.

<p class="text-primary">Primary colored text</p>
<p class="text-danger">Danger colored text</p>
<p class="text-success">Success colored text</p>

<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-warning p-3">Warning background</div>
<div class="bg-dark text-white p-3">Dark background</div>

Note: .bg-* only sets a background color; it doesn't automatically add padding or rounded corners, so pair it with spacing utilities like .p-3 as shown above.

3. Subtle Backgrounds and Emphasis Text (Bootstrap 5.3+)

Newer Bootstrap 5.3 releases add softer, low-contrast pairs for each theme color: .bg-{color}-subtle (a pale tint of the color, good for badge/alert backgrounds) and .text-{color}-emphasis (a darker, more accessible shade of the color for text sitting on top of a subtle background).

<span class="badge bg-success-subtle text-success-emphasis">
  Open
</span>

<span class="badge bg-danger-subtle text-danger-emphasis">
  Closed
</span>

Why use subtle pairs? A solid bg-danger badge is loud; bg-danger-subtle + text-danger-emphasis reads as "danger" with much less visual weight — useful for status tags that appear many times on one page, like a trail list.

4. Worked Example: TrailMap Difficulty Badges

TrailMap tags every trail card with a difficulty badge: green for easy, orange/warning for moderate, red for difficult. All three reuse the same theme colors from section 1 — only the keyword changes.

<!-- Easy -->
<span class="badge bg-success">Easy</span>

<!-- Moderate -->
<span class="badge bg-warning text-dark">Moderate</span>

<!-- Difficult -->
<span class="badge bg-danger">Difficult</span>

Difficulty	Color keyword	Class used
Easy	success (green)	`bg-success`
Moderate	warning (orange/yellow)	`bg-warning text-dark`
Difficult	danger (red)	`bg-danger`

Note: bg-warning's yellow is too light for white text to read well, so it's paired with text-dark — Bootstrap doesn't auto-correct contrast on every color, only check it manually where needed.

Next up: color alone doesn't solve everything — head to Text Utilities for alignment, wrapping, truncation, casing and weight classes.

Prev Next