Bootstrap5 Color

Bootstrap 5 provides some representative 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 :

Example

<div class="container">
  <h2>Text color representing the specified meaning</h2>
  <p class="text-muted">Soft text.</p>
  <p class="text-primary">Important text.</p>
  <p class="text-success">The text of successful execution.</p>
  <p class="text-info">Text representing some prompt information.</p>
  <p class="text-warning">Warning text.</p>
  <p class="text-danger">Dangerous operation text.</p>
  <p class="text-secondary">Subtitle.</p>
  <p class="text-dark">Dark gray text.</p>
  <p class="text-body">The default color is black.</p>
  <p class="text-light">Light gray text (unclear on a white background).</p>
  <p class="text-white">White text (unclear on a white background).</p>
</div>

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

Example

<p class="text-black-50">Black text with a transparency of 50% and a background of white.</p>
<p class="text-white-50 bg-dark">White text with a transparency of 50% and a black background.</p>

Use in links

Example

<div class="container">
  <h2>text color</h2>
  <p>Move the mouse to the link.</p>
  <a href="#" class="text-muted">Soft links.</a>
  <a href="#" class="text-primary">Main link.</a>
  <a href="#" class="text-success">Successfully linked.</a>
  <a href="#" class="text-info">Information text link.</a>
  <a href="#" class="text-warning">Warning link.</a>
  <a href="#" class="text-danger">Dangerous links.</a>
  <a href="#" class="text-secondary">Subtitle link.</a>
  <a href="#" class="text-dark">Dark gray links.</a>
  <a href="#" class="text-light">Light gray links.</a>
</div>

Background color

The classes that provide background colors include: .bg-primary , .bg-success , .bg-info , .bg- warning, .bg-danger , .bg-secondary , .bg-dark and .bg-light

Note that the background color does not set the color of the text, and in some cases you need to match the .text-\* class is used together.

Example

<div class="container">
  <h2>Background</h2>
  <p class="bg-primary text-white">Important background colors。</p>
  <p class="bg-success text-white">Successfully executed background color.</p>
  <p class="bg-info text-white">Information prompt 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">Subtitle 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>