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>