Bootstrap Colors
Bootstrap ships a consistent theme color palette used across text, backgrounds, borders, buttons, and alerts. This lesson explains how to apply and combine those colors with utility classes.
Bootstrap Colors Overview
Bootstrap defines eight theme colors—primary, secondary, success, danger, warning, info, light, and dark—plus body and white/black variants. Each color has matching utility classes: text-{color} for text, bg-{color} for backgrounds, and border-{color} for borders, so the same palette flows through every component.
Bootstrap 5.3 introduced subtle background and text-emphasis pairings (like bg-primary-subtle and text-primary-emphasis) that provide softer, accessible color combinations well-suited for alerts, badges, and cards without needing custom CSS.
| Concept | Description | Common Usage |
| Theme colors | primary, secondary, success, danger, warning, info, light, dark | Consistent color usage across components |
| text-{color} | Applies theme color to text | Highlighting status or emphasis in copy |
| bg-{color} | Applies theme color as background | Sections, badges, buttons, alerts |
| border-{color} | Applies theme color to a border | Outlined cards, inputs, callouts |
| Subtle variants | bg-*-subtle and text-*-emphasis pairs | Softer, accessible color combinations |
Bootstrap Colors Example
<p class="text-success">Operation completed successfully.</p>
<p class="text-danger">Something went wrong.</p>
<div class="bg-primary text-white p-3 rounded">Primary background</div>
<div class="bg-warning-subtle text-warning-emphasis p-3 rounded border border-warning-subtle">
Subtle warning callout
</div>
<span class="border border-secondary rounded-pill px-3 py-1">Outlined pill</span>
text-success and text-danger apply theme colors directly to text for quick status messaging. The bg-primary block shows a solid background paired with white text for contrast, while the subtle warning example combines a soft background, matching emphasis text color, and a subtle border for an accessible, low-contrast callout.
Top 10 Bootstrap Colors Examples
These are the color utility patterns you'll use to apply Bootstrap's theme palette consistently.
| # | Example | Syntax |
| 1 | Primary text color | <p class="text-primary">Text</p> |
| 2 | Success background | <div class="bg-success text-white p-2">Success</div> |
| 3 | Danger border | <div class="border border-danger p-2">Error box</div> |
| 4 | Muted secondary text | <p class="text-secondary">Secondary text</p> |
| 5 | Subtle info background | <div class="bg-info-subtle text-info-emphasis p-2">Info</div> |
| 6 | Body background color | <div class="bg-body text-body">Default surface</div> |
| 7 | Opacity variant | <p class="text-primary text-opacity-75">Softer primary text</p> |
| 8 | Dark background, white text | <div class="bg-dark text-white p-3">Dark section</div> |
| 9 | Light background section | <div class="bg-light p-3">Light section</div> |
| 10 | Gradient background | <div class="bg-primary bg-gradient p-3 text-white">Gradient</div> |
Popular Real-World Bootstrap Colors Examples
These color patterns are common in status messages, badges, sections, and callouts.
| Scenario | Pattern |
| Success confirmation message | <p class="text-success fw-semibold">Payment received.</p> |
| Error validation message | <div class="text-danger small">This field is required.</div> |
| Warning banner | <div class="bg-warning-subtle text-warning-emphasis p-3 rounded">Heads up</div> |
| Dark footer section | <footer class="bg-dark text-white py-4">Footer</footer> |
| Status badge dot | <span class="bg-success rounded-circle" style="width:10px;height:10px;display:inline-block;"></span> |
| Info callout box | <div class="bg-info-subtle text-info-emphasis border border-info-subtle rounded p-3">Note</div> |
| Highlighted pricing card | <div class="card border-primary">Featured plan</div> |
| Muted metadata text | <span class="text-secondary small">Updated 2 days ago</span> |
Best Practices
- Stick to Bootstrap's theme color names instead of inventing new ad-hoc colors for consistency.
- Pair bg-{color} with a readable text color, usually text-white or text-dark, for contrast.
- Use subtle variants (bg-*-subtle, text-*-emphasis) for gentler callouts instead of full-strength colors.
- Reserve danger and warning colors for genuine errors and warnings so they retain meaning.
- Customize the palette through Sass variables rather than overriding classes with custom CSS.
- Check color contrast ratios, especially with subtle and opacity variants, for accessibility.
- Use semantic color names (success, danger) rather than color-literal names (green, red) in your own custom classes.
Common Mistakes
- Using bg-warning or bg-light without adjusting text color, resulting in poor contrast.
- Overusing bright theme colors everywhere, diluting their meaning as status indicators.
- Hardcoding hex colors in inline styles instead of using or extending the theme palette.
- Forgetting subtle variants require Bootstrap 5.3 or later.
- Not testing color combinations against WCAG contrast guidelines.
- Applying text-white on light backgrounds by mistake, making text invisible.
Key Takeaways
- Bootstrap defines eight core theme colors used consistently across components.
- text-*, bg-*, and border-* utilities apply the palette to different properties.
- Subtle background/emphasis pairs provide accessible, low-contrast color combinations.
- Color utilities can be combined with opacity and gradient modifiers.
- Customizing the palette through Sass variables keeps colors consistent site-wide.
Pro Tip
When designing alerts or badges, prefer the *-subtle and *-emphasis pairing introduced in Bootstrap 5.3—it gives you accessible contrast without manually picking custom colors.