Bootstrap4 Colors

Bootstrap 4 provides some color classes with specific meanings: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, 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">Important text.</p>
  <p class="text-success">Successful operation text.</p>
  <p class="text-info">Informational text.</p>
  <p class="text-warning">Warning text.</p>
  <p class="text-danger">Dangerous operation text.</p>
  <p class="text-secondary">Secondary title.</p>
  <p class="text-dark">Dark gray text.</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>

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">Informational 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 the text color; in some instances, you need to use them with .text-* classes.

Example

<div class="container">
  <h2>Background Colors</h2>
  <p class="bg-primary text-white">Important background color.</p>
  <p class="bg-success text-white">Successful operation background color.</p>
  <p class="bg-info text-white">Informational background color.</p>
  <p class="bg-warning text-white">Warning background color.</p>
  <p class="bg-danger text-white">Dangerous background color.</p>
  <p class="bg-secondary text-white">Secondary title 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>