Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Colors
Use .text-{name} colorize text.
.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
<p class="text-primary">.text-primary</p><p class="text-secondary">.text-secondary</p><p class="text-success">.text-success</p><p class="text-danger">.text-danger</p><p class="text-warning bg-dark">.text-warning</p><p class="text-info bg-dark">.text-info</p><p class="text-light bg-dark">.text-light</p><p class="text-dark">.text-dark</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>Opacity
Use .text-opacity-{value} utilities
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
<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>
