Colors and backgrounds
Bootstrap has eight named theme colors. A color's name describes its role, not its shade: danger is a dangerous action, success is success. That is why the same classes work for buttons, text, backgrounds and borders, and the palette can later be changed in one place.
Theme colors
| Name | Purpose |
|---|---|
primary | Main color, main actions |
secondary | Secondary things |
success | Success, done |
danger | Error, deletion |
warning | Warning |
info | Information |
light, dark | Light and dark |
Text and background color
The text-{color} classes color text, bg-{color} color the background:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="text-success">Task completed</p>
<p class="text-danger">Deadline missed</p>
<div class="bg-primary text-white p-3">A blue block with white text</div>The first two lines are colored, and the blue block with white text works as a noticeable banner.
Background with matching text
You do not have to pick a text color for a background by hand: the text-bg-{color} classes set the background and a contrasting text color at once.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="text-bg-warning p-2 mb-2">Yellow background, dark text</div>
<div class="text-bg-dark p-2">Dark background, light text</div>On yellow the text is dark, on dark it is light: Bootstrap chose them itself.
Subtle shades
For calm notices there are light background variants bg-{color}-subtle and matching dark text text-{color}-emphasis:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="bg-success-subtle text-success-emphasis p-3 rounded">
Payment received: $49.00
</div>The light green box with dark green text looks softer than a bright bg-success.
Page colors
For neutral parts of the interface there are colors that adapt to the light and dark theme by themselves:
| Class | What it gives |
|---|---|
text-body-secondary | Gray helper text |
text-body-emphasis | The highest-contrast text |
bg-body-tertiary | Slightly gray background for panels and headers |
bg-body | Page background |
Opacity
The bg-opacity-* and text-opacity-* classes with values 10, 25, 50 and 75 make a color semi-transparent: bg-primary bg-opacity-25 is a pale blue background.
Common mistake
Conveying meaning with color alone: red text for "error", green for "done". A person with color blindness will not see the difference, and a screen reader does not announce color. Add a word or an icon: "Error: deadline missed", not just a red date.