Bootstrap Text colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Colors

Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.

.text-primary

.text-secondary

.text-success

.text-info

.text-warning

.text-danger

.text-light

.text-dark

.text-gray

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-danger">.text-danger</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-gray">.text-gray</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>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Extended text color palette

Extended palette is enabled by default. You can disable it by setting $enable-extended-color-palette variable to false. Here’s how the complete text color palette looks:

.text-blue
.text-indigo
.text-navy
.text-maroon
.text-brown
.text-purple
.text-pink
.text-magenta
.text-red
.text-orange
.text-yellow
.text-lime
.text-green
.text-teal
.text-cyan
.text-black
.text-gray
.text-white
<div class="text-blue">.text-blue</div>
<div class="text-indigo">.text-indigo</div>
<div class="text-navy">.text-navy</div>
<div class="text-maroon">.text-maroon</div>
<div class="text-brown">.text-brown</div>
<div class="text-purple">.text-purple</div>
<div class="text-pink">.text-pink</div>
<div class="text-magenta">.text-magenta</div>
<div class="text-red">.text-red</div>
<div class="text-orange">.text-orange</div>
<div class="text-yellow">.text-yellow</div>
<div class="text-lime">.text-lime</div>
<div class="text-green">.text-green</div>
<div class="text-teal">.text-teal</div>
<div class="text-cyan">.text-cyan</div>
<div class="text-black">.text-black</div>
<div class="text-gray">.text-gray</div>
<div class="text-white bg-dark">.text-white</div>

Shade variants

Because background colors uses hsla(), it’s easy to make them lighter or darker. Just use .text-<variant>-<value> class on .text-*. Default shading levels are 5. You can change them in $shading-levels variable.

Where <variant> is:

  • lighten for classes that lighten the background color
  • darken for classes that darken the background color

And <value> can be <xs|sm|md|lg|xl>.

Theme colors

.text-primary .text-lighten-xl
.text-primary .text-lighten-lg
.text-primary .text-lighten-md
.text-primary .text-lighten-sm
.text-primary .text-lighten-xs
.text-primary
.text-primary .text-darken-xs
.text-primary .text-darken-sm
.text-primary .text-darken-md
.text-primary .text-darken-lg
.text-primary .text-darken-xl
.text-secondary .text-lighten-xl
.text-secondary .text-lighten-lg
.text-secondary .text-lighten-md
.text-secondary .text-lighten-sm
.text-secondary .text-lighten-xs
.text-secondary
.text-secondary .text-darken-xs
.text-secondary .text-darken-sm
.text-secondary .text-darken-md
.text-secondary .text-darken-lg
.text-secondary .text-darken-xl
.text-success .text-lighten-xl
.text-success .text-lighten-lg
.text-success .text-lighten-md
.text-success .text-lighten-sm
.text-success .text-lighten-xs
.text-success
.text-success .text-darken-xs
.text-success .text-darken-sm
.text-success .text-darken-md
.text-success .text-darken-lg
.text-success .text-darken-xl
.text-info .text-lighten-xl
.text-info .text-lighten-lg
.text-info .text-lighten-md
.text-info .text-lighten-sm
.text-info .text-lighten-xs
.text-info
.text-info .text-darken-xs
.text-info .text-darken-sm
.text-info .text-darken-md
.text-info .text-darken-lg
.text-info .text-darken-xl
.text-warning .text-lighten-xl
.text-warning .text-lighten-lg
.text-warning .text-lighten-md
.text-warning .text-lighten-sm
.text-warning .text-lighten-xs
.text-warning
.text-warning .text-darken-xs
.text-warning .text-darken-sm
.text-warning .text-darken-md
.text-warning .text-darken-lg
.text-warning .text-darken-xl
.text-danger .text-lighten-xl
.text-danger .text-lighten-lg
.text-danger .text-lighten-md
.text-danger .text-lighten-sm
.text-danger .text-lighten-xs
.text-danger
.text-danger .text-darken-xs
.text-danger .text-darken-sm
.text-danger .text-darken-md
.text-danger .text-darken-lg
.text-danger .text-darken-xl
.text-light .text-lighten-xl
.text-light .text-lighten-lg
.text-light .text-lighten-md
.text-light .text-lighten-sm
.text-light .text-lighten-xs
.text-light
.text-light .text-darken-xs
.text-light .text-darken-sm
.text-light .text-darken-md
.text-light .text-darken-lg
.text-light .text-darken-xl
.text-dark .text-lighten-xl
.text-dark .text-lighten-lg
.text-dark .text-lighten-md
.text-dark .text-lighten-sm
.text-dark .text-lighten-xs
.text-dark
.text-dark .text-darken-xs
.text-dark .text-darken-sm
.text-dark .text-darken-md
.text-dark .text-darken-lg
.text-dark .text-darken-xl
.text-gray .text-lighten-xl
.text-gray .text-lighten-lg
.text-gray .text-lighten-md
.text-gray .text-lighten-sm
.text-gray .text-lighten-xs
.text-gray
.text-gray .text-darken-xs
.text-gray .text-darken-sm
.text-gray .text-darken-md
.text-gray .text-darken-lg
.text-gray .text-darken-xl

Extended colors

.text-blue .text-lighten-xl
.text-blue .text-lighten-lg
.text-blue .text-lighten-md
.text-blue .text-lighten-sm
.text-blue .text-lighten-xs
.text-blue
.text-blue .text-darken-xs
.text-blue .text-darken-sm
.text-blue .text-darken-md
.text-blue .text-darken-lg
.text-blue .text-darken-xl
.text-indigo .text-lighten-xl
.text-indigo .text-lighten-lg
.text-indigo .text-lighten-md
.text-indigo .text-lighten-sm
.text-indigo .text-lighten-xs
.text-indigo
.text-indigo .text-darken-xs
.text-indigo .text-darken-sm
.text-indigo .text-darken-md
.text-indigo .text-darken-lg
.text-indigo .text-darken-xl
.text-navy .text-lighten-xl
.text-navy .text-lighten-lg
.text-navy .text-lighten-md
.text-navy .text-lighten-sm
.text-navy .text-lighten-xs
.text-navy
.text-navy .text-darken-xs
.text-navy .text-darken-sm
.text-navy .text-darken-md
.text-navy .text-darken-lg
.text-navy .text-darken-xl
.text-maroon .text-lighten-xl
.text-maroon .text-lighten-lg
.text-maroon .text-lighten-md
.text-maroon .text-lighten-sm
.text-maroon .text-lighten-xs
.text-maroon
.text-maroon .text-darken-xs
.text-maroon .text-darken-sm
.text-maroon .text-darken-md
.text-maroon .text-darken-lg
.text-maroon .text-darken-xl
.text-brown .text-lighten-xl
.text-brown .text-lighten-lg
.text-brown .text-lighten-md
.text-brown .text-lighten-sm
.text-brown .text-lighten-xs
.text-brown
.text-brown .text-darken-xs
.text-brown .text-darken-sm
.text-brown .text-darken-md
.text-brown .text-darken-lg
.text-brown .text-darken-xl
.text-purple .text-lighten-xl
.text-purple .text-lighten-lg
.text-purple .text-lighten-md
.text-purple .text-lighten-sm
.text-purple .text-lighten-xs
.text-purple
.text-purple .text-darken-xs
.text-purple .text-darken-sm
.text-purple .text-darken-md
.text-purple .text-darken-lg
.text-purple .text-darken-xl
.text-pink .text-lighten-xl
.text-pink .text-lighten-lg
.text-pink .text-lighten-md
.text-pink .text-lighten-sm
.text-pink .text-lighten-xs
.text-pink
.text-pink .text-darken-xs
.text-pink .text-darken-sm
.text-pink .text-darken-md
.text-pink .text-darken-lg
.text-pink .text-darken-xl
.text-magenta .text-lighten-xl
.text-magenta .text-lighten-lg
.text-magenta .text-lighten-md
.text-magenta .text-lighten-sm
.text-magenta .text-lighten-xs
.text-magenta
.text-magenta .text-darken-xs
.text-magenta .text-darken-sm
.text-magenta .text-darken-md
.text-magenta .text-darken-lg
.text-magenta .text-darken-xl
.text-red .text-lighten-xl
.text-red .text-lighten-lg
.text-red .text-lighten-md
.text-red .text-lighten-sm
.text-red .text-lighten-xs
.text-red
.text-red .text-darken-xs
.text-red .text-darken-sm
.text-red .text-darken-md
.text-red .text-darken-lg
.text-red .text-darken-xl
.text-orange .text-lighten-xl
.text-orange .text-lighten-lg
.text-orange .text-lighten-md
.text-orange .text-lighten-sm
.text-orange .text-lighten-xs
.text-orange
.text-orange .text-darken-xs
.text-orange .text-darken-sm
.text-orange .text-darken-md
.text-orange .text-darken-lg
.text-orange .text-darken-xl
.text-yellow .text-lighten-xl
.text-yellow .text-lighten-lg
.text-yellow .text-lighten-md
.text-yellow .text-lighten-sm
.text-yellow .text-lighten-xs
.text-yellow
.text-yellow .text-darken-xs
.text-yellow .text-darken-sm
.text-yellow .text-darken-md
.text-yellow .text-darken-lg
.text-yellow .text-darken-xl
.text-lime .text-lighten-xl
.text-lime .text-lighten-lg
.text-lime .text-lighten-md
.text-lime .text-lighten-sm
.text-lime .text-lighten-xs
.text-lime
.text-lime .text-darken-xs
.text-lime .text-darken-sm
.text-lime .text-darken-md
.text-lime .text-darken-lg
.text-lime .text-darken-xl
.text-green .text-lighten-xl
.text-green .text-lighten-lg
.text-green .text-lighten-md
.text-green .text-lighten-sm
.text-green .text-lighten-xs
.text-green
.text-green .text-darken-xs
.text-green .text-darken-sm
.text-green .text-darken-md
.text-green .text-darken-lg
.text-green .text-darken-xl
.text-teal .text-lighten-xl
.text-teal .text-lighten-lg
.text-teal .text-lighten-md
.text-teal .text-lighten-sm
.text-teal .text-lighten-xs
.text-teal
.text-teal .text-darken-xs
.text-teal .text-darken-sm
.text-teal .text-darken-md
.text-teal .text-darken-lg
.text-teal .text-darken-xl
.text-cyan .text-lighten-xl
.text-cyan .text-lighten-lg
.text-cyan .text-lighten-md
.text-cyan .text-lighten-sm
.text-cyan .text-lighten-xs
.text-cyan
.text-cyan .text-darken-xs
.text-cyan .text-darken-sm
.text-cyan .text-darken-md
.text-cyan .text-darken-lg
.text-cyan .text-darken-xl
.text-black .text-lighten-xl
.text-black .text-lighten-lg
.text-black .text-lighten-md
.text-black .text-lighten-sm
.text-black .text-lighten-xs
.text-black
.text-black .text-darken-xs
.text-black .text-darken-sm
.text-black .text-darken-md
.text-black .text-darken-lg
.text-black .text-darken-xl
.text-gray .text-lighten-xl
.text-gray .text-lighten-lg
.text-gray .text-lighten-md
.text-gray .text-lighten-sm
.text-gray .text-lighten-xs
.text-gray
.text-gray .text-darken-xs
.text-gray .text-darken-sm
.text-gray .text-darken-md
.text-gray .text-darken-lg
.text-gray .text-darken-xl

Opacity

Change the text color opacity by changing it’s alpha channel using text-opacity-*. Available for all default theme colors and extended colors, too.

.text-opacity-0
.text-opacity-5
.text-opacity-10
.text-opacity-20
.text-opacity-30
.text-opacity-40
.text-opacity-50
.text-opacity-60
.text-opacity-70
.text-opacity-80
.text-opacity-90
.text-opacity-100
<div class="text-primary text-opacity-0 border">.text-opacity-0</div>
<div class="text-primary text-opacity-5">.text-opacity-5</div>
<div class="text-primary text-opacity-10">.text-opacity-10</div>
<div class="text-primary text-opacity-20">.text-opacity-20</div>
<div class="text-primary text-opacity-30">.text-opacity-30</div>
<div class="text-primary text-opacity-40">.text-opacity-40</div>
<div class="text-primary text-opacity-50">.text-opacity-50</div>
<div class="text-primary text-opacity-60">.text-opacity-60</div>
<div class="text-primary text-opacity-70">.text-opacity-70</div>
<div class="text-primary text-opacity-80">.text-opacity-80</div>
<div class="text-primary text-opacity-90">.text-opacity-90</div>
<div class="text-primary text-opacity-100">.text-opacity-100</div>

Specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.

Sass

In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.

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

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

$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
);

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,
  values: map-merge(
    $theme-colors,
    (
      "white": $white,
      "body": $body-color,
      "muted": $text-muted,
      "black-50": rgba($black, .5),
      "white-50": rgba($white, .5),
      "reset": inherit,
    )
  )
),