Colors & Backgrounds
Learn Bootstrap's theme color system, including background classes like .bg-primary, text color classes like .text-danger, and contextual color usage.
Introduction
Color communicates meaning instantly: red usually signals danger or an error, green signals success, and blue often signals a primary action. Bootstrap builds this idea directly into its class system with a set of named theme colors that you can apply to backgrounds, text, borders, and more.
- Bootstrap's full set of theme colors.
- How to use background color classes like .bg-primary.
- How to use text color classes like .text-danger.
- How contextual color choice communicates meaning to users.
Bootstrap's Theme Colors
Bootstrap defines a set of theme colors, each with a consistent name used across background, text, border, and button utility classes: primary, secondary, success, danger, warning, info, light, and dark.
| Color Name | Typical Meaning | Default Shade |
|---|---|---|
| primary | Main brand or action color | Blue |
| secondary | Secondary, less prominent action | Gray |
| success | Positive outcome, confirmation | Green |
| danger | Error, destructive action | Red |
| warning | Caution, needs attention | Yellow |
| info | Neutral, informational note | Light blue |
| light | Light background or surface | Near white |
| dark | Dark background or surface | Near black |
Background Color Classes
Background color classes follow the pattern `.bg-{color}`. They set the `background-color` CSS property of the element using the matching theme color.
<div class="p-3 mb-2 bg-primary text-white">bg-primary</div><div class="p-3 mb-2 bg-success text-white">bg-success</div><div class="p-3 mb-2 bg-warning text-dark">bg-warning</div><div class="p-3 mb-2 bg-danger text-white">bg-danger</div>Click Run to see what this code prints.
Text Color Classes
As covered in the typography lesson, text color classes follow the pattern `.text-{color}` and set only the text color, leaving the background untouched. They are commonly used for status messages, links, and emphasized words within otherwise normal text.
<p>Your order was <span class="text-success fw-bold">successfully placed</span>.</p><p>Your payment <span class="text-danger fw-bold">failed to process</span>.</p>Click Run to see what this code prints.
Contextual Meaning of Colors
These same color names are reused consistently across nearly every Bootstrap component: buttons (`.btn-success`), alerts (`.alert-danger`), badges (`.badge.bg-warning`), and borders (`.border-info`). This consistency means once a user learns that green means success and red means danger in one part of your interface, they instantly understand it everywhere else too.
<div class="alert alert-warning" role="alert"> Your session will expire in 5 minutes.</div><button type="button" class="btn btn-danger">Delete Account</button>Click Run to see what this code prints.
Combining Background and Text Colors
When applying a background color, you often need to pair it with a matching text color for readability. Dark backgrounds (like primary, success, danger, dark) usually need `.text-white`, while light backgrounds (like warning, light, info) usually need `.text-dark`.
<div class="p-4 bg-dark text-white rounded"> <h4>Dark Card</h4> <p>White text ensures readable contrast on this dark background.</p></div>Click Run to see what this code prints.
Gradient and Opacity Backgrounds
Bootstrap also offers a `.bg-gradient` class, which adds a subtle gradient overlay on top of any `.bg-{color}` class, and opacity variants like `.bg-primary-subtle`, a softer, lighter tint of the theme color often used for less prominent backgrounds.
<div class="p-4 bg-primary bg-gradient text-white rounded mb-2">bg-primary with gradient</div><div class="p-4 bg-primary-subtle text-dark rounded">bg-primary-subtle</div>Click Run to see what this code prints.
Common Mistakes
- Using .bg-warning or .bg-light without pairing it with .text-dark, resulting in low-contrast, hard-to-read text.
- Using color inconsistently, for example a red button that performs a safe, non-destructive action.
- Forgetting that .text-{color} only changes text color, not the background, and vice versa for .bg-{color}.
- Relying on color alone to convey meaning without any text or icon, which hurts accessibility for colorblind users.
Best Practices
- Match theme colors to their conventional meaning: green for success, red for danger, yellow for warning.
- Always pair background color classes with an appropriately contrasting text color class.
- Never rely on color alone to communicate critical information; pair it with text or an icon.
- Use the "subtle" background variants for gentle accents instead of full-strength colors when you want a lighter touch.
Frequently Asked Questions
Yes, if you compile Bootstrap from its Sass source, you can extend the $theme-colors map with your own named colors, which then generates matching utility, button, and alert classes automatically.
.bg-primary uses the full-strength theme color, while .bg-primary-subtle uses a much lighter, softer tint of the same color, useful for gentle highlights or badges.
Yes, since Bootstrap 5.3, you can enable dark mode by adding the data-bs-theme="dark" attribute to the html element or any container, and Bootstrap's color system will automatically adjust.
Key Takeaways
- Bootstrap defines eight core theme colors: primary, secondary, success, danger, warning, info, light, and dark.
- .bg-{color} sets background color; .text-{color} sets text color; they can be combined.
- The same color names are reused consistently across buttons, alerts, badges, and borders for predictable meaning.
- Subtle and gradient variants offer softer alternatives to full-strength theme colors.
Summary
Bootstrap's color system gives every element on your page a consistent, meaningful visual language, from buttons to alerts to plain text. With containers, the grid, typography, and color now covered, the next lesson moves into spacing utilities, the classes that control margin and padding throughout your layout.