Bootstrap Colors
Bootstrap includes a set of theme colors — primary, secondary, success, danger, warning, info, light and dark — that you can apply to text, backgrounds, borders and more with simple utility classes.
These semantic color names help communicate meaning, such as danger for errors or success for confirmations, while keeping a consistent look across your entire site.
<p class="text-success">Success text</p>
<div class="bg-warning">Warning background</div>Text and background colors
Use .text-{color} for text color and .bg-{color} for background color, such as .text-danger or .bg-success. Combine .bg-* with .text-white or .text-dark for readable contrast.
Contextual meaning
Using the right semantic color helps users instantly understand the message: primary for main actions, danger for errors, warning for caution, and success for positive outcomes.
<p class="text-primary">Primary text</p>
<p class="text-danger">Danger text</p>
<p class="text-success">Success text</p>Three lines of text in blue, red, and greenEach .text-{color} class changes the color of the text to match Bootstrap's theme palette.
<div class="bg-dark text-white p-3">Dark background with white text</div>A dark box containing white text with paddingbg-dark sets a dark background, text-white keeps the text readable, and p-3 adds padding.
Key points
- Bootstrap has 8 theme colors: primary, secondary, success, danger, warning, info, light, dark.
- .text-{color} changes text color.
- .bg-{color} changes background color.
- Combine background and text color classes for good contrast.