Bootstrap Colors

Bootstrap includes a series of contextual color classes that help convey meaning through colors. These color utility classes can be applied to the text color or the background. The names of the colors includes: primary, secondary, success, warning, danger, info, light, dark, body, muted, and white.

NOTE

These same color names will be used with some components like alerts and buttons.

To change the text color of an element a class that starts with text- and is followed by the desired color name can be used. To change the background color, use bg- followed by the desired color.

<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">.text-warning</p>
<p class="text-info">.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>