Developed by Codescandy

Text Colors

Convey meaning throughcolorwith a handful of color utility classes. Includes support for styling links with hover states, too.

Colors

Colorize text with color utilities. If you want to colorize links, you can use the.link-*helper classeswhich have:hoverand:focusstates.

.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 className="text-primary">.text-primary</p>
<p className="text-secondary">.text-secondary</p>
<p className="text-success">.text-success</p>
<p className="text-danger">.text-danger</p>
<p className="text-warning">.text-warning</p>
<p className="text-info">.text-info</p>
<p className="text-light bg-dark">.text-light</p>
<p className="text-dark">.text-dark</p>
<p className="text-body">.text-body</p>
<p className="text-muted">.text-muted</p>
<p className="text-white bg-dark">.text-white</p>
<p className="text-black-50">.text-black-50</p>
<p className="text-white-50 bg-dark">.text-white-50</p>

Opacity

As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
<div className="text-primary">This is default primary text</div>
<div className="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div className="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div className="text-primary text-opacity-25">This is 25% opacity primary text</div>
Contents