Bootstrap5 Colors

Bootstrap 5 provides several color classes with specific meanings: .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:

Example

<div class="container">
  <h2>Text Colors with Specific Meanings</h2>
  <p class="text-muted">Muted text.</p>
  <p class="text-primary">Primary 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 body color, black.</p>
  <p class="text-light">Light gray text (not visible on white background).</p>
  <p class="text-white">White text (not visible on white background).</p>
</div>

You can set text color transparency to 50% using .text-black-50 or .text-white-50 classes:

Example

<p class="text-black-50">50% transparent black text on white background.</p>
<p class="text-white-50 bg-dark">50% transparent white text on black background.</p>

Using in Links

Example

<div class="container">
  <h2>Text Colors</h2>
  <p>Hover over the links.</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>

Background Colors

Background color classes include: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set text colors; in some instances, you need to use .text-* classes together.

Example

<div class="container">
  <h2>Background Colors</h2>
  <p class="bg-primary text-white">Primary 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">Dark gray background color.</p>
  <p class="bg-light text-dark">Light gray background color.</p>
</div>