Text Colors

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


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














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


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>