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>