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

HTML
<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
HTML
<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>
Recent Notification