indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Color & Background

Set a background color with contrasting foreground color.

Overview #

added-in "1.0"

The capabilities of our .text-* utilities and .bg-* utilities are combined in a single class by color and background aids. We automatically choose a contrasting color for a specific backdrop color using the Sass color-contrast() method.

CAUTION

Heads up! There’s currently no support for a CSS-native color-contrast function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.

RESULT
Primary with contrasting color
Secondary with contrasting color
Success with contrasting color
Danger with contrasting color
Warning with contrasting color
Info with contrasting color
Light with contrasting color
Dark with contrasting color
Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

With components #

Use them in place of combined .text-* and .bg-* classes, like on badges: 

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>
RESULT
Primary Info

Or on cards:

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
RESULT
Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.