Bootstrap5 Colors
Bootstrap 5 provides some meaningful color classes:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(default color, black) and.text-light:
Examples
<div class="container">
<h2>Text colors with specific meanings</h2>
<p class="text-muted">Muted text.</p>
<p class="text-primary">Important text.</p>
<p class="text-success">Success text.</p>
<p class="text-info">Info text.</p>
<p class="text-warning">Warning text.</p>
<p class="text-danger">Danger text.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">Dark gray text.</p>
<p class="text-body">Default color, black.</p>
<p class="text-light">Light gray text (hard to see on white background).</p>
<p class="text-white">White text (hard to see on white background).</p>
</div>
Try it »
You can set the text color transparency to 50% using the.text-black-50or.text-white-50class:
Examples
<p class="text-black-50">Black text with 50% opacity, white background.</p>
<p class="text-white-50 bg-dark">White text with 50% opacity, black background.</p>
Try it »
Use in links
Examples
<div class="container">
<h2>Text colors</h2>
<p>Move the mouse over the link.</p>
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark gray link.</a>
<a href="#" class="text-light">Light gray link.</a>
</div>
Try it »
Background Colors
The classes that provide background colors are:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkand.bg-light。
Note that background colors do not set the text color. In some examples, you need to use them together with the.text-*class.
Examples
<div class="container">
<h2>Background color</h2>
<p class="bg-primary text-white">Important background color.</p>
<p class="bg-success text-white">Success background color.</p>
<p class="bg-info text-white">Info background color.</p>
<p class="bg-warning text-white">Warning background color.</p>
<p class="bg-danger text-white">Danger background color.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Black background color.</p>
<p class="bg-light text-dark">Light gray background color.</p>
</div>
Try it »