Bootstrap 5 provides a powerful semantic color palette. Instead of targeting specific hex codes in CSS, you apply color by telling Bootstrap the meaning of an element—like "success," "danger," or "warning."
You can change the color of any text instantly by using the .text-* utility classes.
.text-primary — Indicates an important or active item.
.text-secondary — Indicates a less important item.
.text-success — Indicates a successful or positive action.
.text-danger — Indicates a dangerous or negative action.
.text-warning — Indicates a warning that might need attention.
.text-info — Indicates neutral information.
.text-light — Light grey text (displayed on a dark background).
.text-dark — Dark grey text.
.text-body — The default body color (usually black/very dark grey).
.text-muted — Faded, muted grey text.
.text-white — Pure white text (displayed on a dark background).
<p class="text-success">Your payment was successful!</p>
<p class="text-danger">Error: Invalid password.</p>Similar to text, you can color the background of any element (like a <div>, section, or table cell) using the .bg-* classes.
<div class="bg-primary text-white p-3">
This block has a solid blue background.
</div>.bg-primary, .bg-danger, or .bg-dark), always remember to pair it with .text-white so the text remains readable! Notice that .bg-warning is a very light yellow, so we use .text-dark with it instead.
Bootstrap 5 includes a beautiful, subtle gradient utility. By adding the .bg-gradient class alongside your primary background color, Bootstrap generates a smooth linear gradient that instantly makes elements feel more premium and dimensional.
.bg-success
.bg-success .bg-gradient
<!-- Applying the gradient effect -->
<div class="bg-primary bg-gradient text-white">
Beautiful Gradient Element
</div>.text-dark with light backgrounds and save .text-white for dark ones.
.text-muted is tuned for readability on white/light backgrounds — it can nearly disappear against a colored or dark background.
A second example — combining a semantic background color with an icon so the meaning isn't conveyed by color alone:
<span class="badge bg-danger">
<i class="fa-solid fa-circle-exclamation"></i> Failed
</span>
<span class="badge bg-success">
<i class="fa-solid fa-circle-check"></i> Passed
</span>Q: Can I create my own custom color, like brand-purple?
A: Not through the CDN build alone — custom theme colors require compiling Bootstrap from its Sass source with your own color variables added to the theme map.
Q: What's the difference between .text-body and .text-dark?
A: .text-body uses your theme's default body text color (which could change if you customize it); .text-dark is a fixed dark gray regardless of body text settings.
Q: Does .bg-gradient work with every background color?
A: Yes — add it alongside any .bg-* class to apply a subtle gradient version of that same color. See the official Bootstrap Colors documentation for the full palette.