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 states.
.text-primary
.text-secondary
.text-success
.text-info
.text-warning
.text-danger
.text-light
.text-dark
.text-white
.text-black
.text-muted
.text-body
<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">.text-info</p>
<p class="text-warning">.text-warning</p>
<p class="text-danger">.text-danger</p>
<p class="text-light">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-white">.text-white</p>
<p class="text-black">.text-black</p>
<p class="text-muted">.text-muted</p>
<p class="text-body">.text-body</p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.
<div class="bg-primary">.bg-primary</div>
<div class="bg-secondary">.bg-secondary</div>
<div class="bg-success">.bg-success</div>
<div class="bg-info">.bg-info</div>
<div class="bg-warning">.bg-warning</div>
<div class="bg-danger">.bg-danger</div>
<div class="bg-light">.bg-light</div>
<div class="bg-dark">.bg-dark</div>
<div class="bg-auto">.bg-auto</div>
<div class="bg-white">.bg-white</div>
<div class="bg-black">.bg-black</div>
<div class="bg-card">.bg-card</div>
<div class="bg-transparent">.bg-transparent</div>