|

Colors

Use a few color utility classes to use color to convey meaning. includes assistance with styling links in hover states.

Colors #

Use a few color utility classes to use color to convey meaning. includes assistance with styling links in hover states.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
  
RESULT
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
Deprecation: With the addition of .text-opacity-* utilities and CSS variables for text utilities, .text-black-50 and .text-white-50 are deprecated as of v5.1.0. They’ll be removed in v6.0.0.
Conveying meaning to assistive technologies

Color-coding to add meaning just gives a visual cue, which users of assistive technologies like screen readers won't be able to understand. Make sure the information the color designates is either evident from the content itself (such as the visible text) or is included in another way, such as by hiding additional text using the .visually-hidden class.

Opacity #

Added in v1.0.0

As of version 1.0.0, Sass is used to create text color utilities using CSS variables. Real-time color adjustments without compilation and dynamic alpha transparency modifications are made possible by this.

How it works #

Consider our default .text-primary utility.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Used a second CSS variable, --bs-text-opacity, for the alpha transparency (with a default value of 1 thanks to a local CSS variable), and utilized an RGB version of the --bs-primary CSS variable (with the value of 13, 110, 253). This implies each time you use .text-primary The value that is calculated is now rgba(13, 110, 253, 1). The internal local CSS variable of each. Because of the way the .text-* class handles inheritance, nested instances of the utility do not necessarily have altered alpha transparency.

Example #

To change that opacity, override --bs-text-opacity via custom styles or inline styles.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
RESULT
This is default primary text
This is 50% opacity primary text
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
RESULT
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text

Specificity #

Sometimes the specificity of another selector prevents contextual classes from being applied. Wrapping the content of the element in a <div> or other more semantic element with the correct class can be a suitable fix in some situations.

Sass #

Consider reading about the integrated CSS custom properties (also known as CSS variables) for colors and more in addition to the accompanying Sass features.

Variables #

Most color utilities are generated by our theme colors, reassigned from our generic color palette variables.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:         $blue;
$secondary:       $gray-600;
$success:         $green;
$info:            $cyan;
$warning:         $yellow;
$danger:          $red;
$light:           $gray-100;
$dark:            $gray-900;

Grayscale colors are also available, but only a subset are used to generate any utilities.


$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Map #

After that, the theme colors are added to a Sass map so that we can loop through them to create our utilities, component modifications, and other things.


  $theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.


  $grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB colors are generated from a separate Sass map:


  $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

And color opacities build on that with their own map that’s consumed by the utilities API:


  $utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Utilities API #

Color utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.


  "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),