Color and background

Set a background color with contrasting foreground color.

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.

Primary Secondary Success Danger Warning Info Light Dark
<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).

Quick tip #7

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.

<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
    <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.
    <div class="text-end">
      <a href="#" class="text-reset">Don't show again</a>

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

Up next
Colored links

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.