Colors

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Bootstrap organizes color around a small named palette — the theme colors — rather than exposing raw hex values throughout its component and utility classes. Every component that needs a contextual color (an alert, a button, a badge, a border) draws from this same fixed set of names, which is what keeps a Bootstrap page’s color usage consistent without every author having to pick hex values by hand.

The theme color set

Eight names make up the default theme palette, each carrying a semantic meaning rather than just a visual one:

Name Typical meaning

primary

The brand’s main color — default emphasis (primary buttons, active nav links)

secondary

A muted, lower-emphasis complement to primary

success

A positive/confirmation state (a saved form, a completed step)

danger

An error or destructive-action state (a failed validation, a delete button)

warning

A caution state, something that needs attention but is not yet an error

info

A neutral, informational callout

light

A light neutral, typically near-white — for a light background/surface

dark

A dark neutral, typically near-black — for a dark background/surface

These names appear consistently across unrelated Bootstrap components — .btn-primary, .alert-success, .badge-danger-lineage classes, and the table row classes covered in Tables (.table-warning, .table-danger) — so learning the eight names once pays off across the whole framework, not just the utility classes below.

Text color utilities

.text-{color} sets the color (text/foreground color) property using one of the theme names:

<p class="text-primary">This text uses the primary theme color.</p>
<p class="text-success">This text uses the success theme color.</p>
<p class="text-danger">This text uses the danger theme color.</p>
<p class="text-muted">This text is deliberately de-emphasized, not a theme color.</p>

.text-muted is a related but distinct utility — it is not one of the eight named theme colors, but a separate, lower-opacity grey specifically meant for secondary/supporting text (see Typography).

Every .text-{color} class also has an -emphasis variant (.text-primary-emphasis, etc.) added in later Bootstrap 5 releases, which resolves to a color tuned to keep sufficient contrast in both light and dark color modes, rather than the flat theme color used as-is.

Background color utilities

.bg-{color} sets background-color the same way, and is commonly paired with a matching or contrasting text color to keep the result readable:

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

Because the theme colors have very different natural brightness (warning’s yellow is light, `dark’s near- black is dark), there is no single text color that reads well against all eight backgrounds — pairing `.bg-{color} with an explicit .text-white or .text-dark (rather than relying on the default text color) is standard practice, and matters for the contrast/accessibility points raised in Getting Started.

.bg-{color} also accepts an opacity modifier, .bg-{color}-subtle, which uses a much lighter tint of the color — suited to a card or alert surface where the full-strength background would be too visually loud:

<div class="bg-danger-subtle text-danger-emphasis p-3 rounded">
  A subdued danger-tinted panel, rather than a solid danger-red block.
</div>

Border color utilities

.border-{color} sets the border-color of an element that already has .border (or one of its directional variants) applied — the color utility does not itself add a border, only colors one that is already present:

<div class="border border-primary p-3 mb-2">Primary-colored border</div>
<div class="border border-success p-3 mb-2">Success-colored border</div>
<div class="border border-2 border-danger p-3">A thicker (border-2), danger-colored border</div>

.border-{n} (0 through 5) controls border width and composes independently of .border-{color}, which controls only the color — the two are applied together as in the third example above.

Combining color utilities with components

Because these are plain utility classes rather than component-specific styles, they work equally well layered onto an unrelated component — an image (see Images), a table cell, or a plain <div> used as a custom card:

<img
  src="photo.jpg"
  class="img-fluid rounded border border-primary"
  alt="An image with a primary-colored border">

<span class="badge bg-info text-dark">New</span>

Customizing the palette

The eight theme colors are not hardcoded — each one is backed by a Sass variable ($primary, $secondary, $success, and so on) with a !default value, following exactly the pattern described in Variables. Overriding $primary before importing Bootstrap’s Sass changes not only .text-primary/.bg-primary/.border-primary, but every component across the framework that draws on the primary color — buttons, links, form focus rings, and more — from that single variable. That whole customization workflow, including adding entirely new theme colors beyond the default eight, is covered in Customization.

See the official Colors and Color customization documentation for the complete utility class reference and the underlying Sass color system.