Color

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

Color on Bootstrap

Colors

<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>

text-primary

text-secondary

text-success

text-info

text-warning

text-danger

Opacity

Color opacity allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our default .text-primary utility.

.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Example

 <div class="text-primary mb-1">This is default primary text</div>
 <div class="text-primary mb-1" style="--bs-text-opacity: .5;">This is 50% opacity primary text using inline css</div>
 <div class="text-primary text-opacity-75 mb-1">This is 75% opacity primary text using utility class</div>
 <div class="text-primary text-opacity-50 mb-1">This is 50% opacity primary text using utility class</div>
 <div class="text-primary text-opacity-25 mb-1">This is 25% opacity primary text using utility class</div>
This is default primary text
This is 50% opacity primary text using inline css
This is 75% opacity primary text using utility class
This is 50% opacity primary text using utility class
This is 25% opacity primary text using utility class
On this page