Color and background

Overview #

The color and background helpers combine the power of the color utilities and background color utilities in one class for ease-of-use. These helpers come in the format: text-bg-{color} where {color} can be primary, secondary, success, danger, warning, info, light, or dark. Please note, these helper classes remove the default anti-aliasing for better readability.

Given below is a common use-case where the helper classes have been used to create variants for the badge component.

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Example #

As seen above, these helper classes can be used to style sections of pages, or used with built-in components. Here's another example of a card component that's been styled with one of these classes (along with other utilities).

<div class="card text-bg-warning border-0 rounded-0 specific-w-250 mx-auto">
  <div class="card-body">
    <h5 class="card-title">
      <i class="fa-light fa-note-sticky me-1"></i> Quick tip #7
    </h5>
    <p class="card-text">
      You can use the export button to quickly get a local copy of your data. 
      Please make sure to store it in a safe place.
    </p>
    <div class="text-end">
      <a href="#" class="text-reset">Don't show again</a>
    </div>
  </div>
</div>

Please note, the icon being used is taken from the Font Awesome icon library (opens in new tab).