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

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.9.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize