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-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

<!-- primary color -->
 <p class="text-primary">.text-primary</p>

 <!-- secondary color -->
 <p class="text-secondary">.text-secondary</p>

 <!-- success color -->
 <p class="text-success">.text-success</p>

 <!-- danger color -->
 <p class="text-danger">.text-danger</p>

 <!-- warning color -->
 <p class="text-warning">.text-warning</p>

 <!-- info color -->
 <p class="text-info">.text-info</p>

 <!-- light color -->
 <p class="text-light bg-dark">.text-light</p>

 <!-- dark color -->
 <p class="text-dark">.text-dark</p>

 <!-- body color -->
 <p class="text-body">.text-body</p>

 <!-- muted color -->
 <p class="text-muted">.text-muted</p>

 <!-- white color -->
 <p class="text-white bg-dark">.text-white</p>

 <!-- black 50 color -->
 <p class="text-black-50">.text-black-50</p>

 <!-- white 50 color -->
 <p class="text-white-50 bg-dark">.text-white-50</p>

Opacity

As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
 <!-- text opacity -->
<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>
Contents