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>
<p class="text-body">text-body</p>
<p class="text-body-highlight">text-body-highlight</p>
<p class="text-body-secondary">text-body-secondary</p>
<p class="text-body-tertiary">text-body-tertiary</p>
<p class="text-body-quaternary">text-body-quaternary</p>
<p class="text-body-emphasis">text-body-emphasis</p><span class="pe-3 text-primary-subtle  bg-dark dark__bg-gray-400 ">text-primary-subtle</span><br /><span class="pe-3 text-primary-light  ">text-primary-light</span><br /><span class="pe-3 text-primary-lighter  ">text-primary-lighter</span><br /><span class="pe-3 text-primary-dark  ">text-primary-dark</span><br /><span class="pe-3 text-primary-darker  ">text-primary-darker</span><br /><span class="pe-3 text-primary-emphasis  ">text-primary-emphasis</span><br /><span class="pe-3 text-secondary-subtle  bg-dark dark__bg-gray-400 ">text-secondary-subtle</span><br /><span class="pe-3 text-secondary-light  ">text-secondary-light</span><br /><span class="pe-3 text-secondary-lighter  ">text-secondary-lighter</span><br /><span class="pe-3 text-secondary-dark   bg-white">text-secondary-dark</span><br /><span class="pe-3 text-secondary-darker  ">text-secondary-darker</span><br /><span class="pe-3 text-secondary-emphasis  ">text-secondary-emphasis</span><br /><span class="pe-3 text-success-subtle  bg-dark dark__bg-gray-400 ">text-success-subtle</span><br /><span class="pe-3 text-success-light  ">text-success-light</span><br /><span class="pe-3 text-success-lighter  ">text-success-lighter</span><br /><span class="pe-3 text-success-dark  ">text-success-dark</span><br /><span class="pe-3 text-success-darker  ">text-success-darker</span><br /><span class="pe-3 text-success-emphasis  ">text-success-emphasis</span><br /><span class="pe-3 text-info-subtle  bg-dark dark__bg-gray-400 ">text-info-subtle</span><br /><span class="pe-3 text-info-light  ">text-info-light</span><br /><span class="pe-3 text-info-lighter  ">text-info-lighter</span><br /><span class="pe-3 text-info-dark  ">text-info-dark</span><br /><span class="pe-3 text-info-darker  ">text-info-darker</span><br /><span class="pe-3 text-info-emphasis  ">text-info-emphasis</span><br /><span class="pe-3 text-warning-subtle  bg-dark dark__bg-gray-400 ">text-warning-subtle</span><br /><span class="pe-3 text-warning-light  ">text-warning-light</span><br /><span class="pe-3 text-warning-lighter  ">text-warning-lighter</span><br /><span class="pe-3 text-warning-dark  ">text-warning-dark</span><br /><span class="pe-3 text-warning-darker  ">text-warning-darker</span><br /><span class="pe-3 text-warning-emphasis  ">text-warning-emphasis</span><br /><span class="pe-3 text-danger-subtle  bg-dark dark__bg-gray-400 ">text-danger-subtle</span><br /><span class="pe-3 text-danger-light  ">text-danger-light</span><br /><span class="pe-3 text-danger-lighter  ">text-danger-lighter</span><br /><span class="pe-3 text-danger-dark  ">text-danger-dark</span><br /><span class="pe-3 text-danger-darker  ">text-danger-darker</span><br /><span class="pe-3 text-danger-emphasis  ">text-danger-emphasis</span><br />

text-primary

text-secondary

text-success

text-info

text-warning

text-danger

text-body

text-body-highlight

text-body-secondary

text-body-tertiary

text-body-quaternary

text-body-emphasis

text-primary-subtle
text-primary-light
text-primary-lighter
text-primary-dark
text-primary-darker
text-primary-emphasis
text-secondary-subtle
text-secondary-light
text-secondary-lighter
text-secondary-dark
text-secondary-darker
text-secondary-emphasis
text-success-subtle
text-success-light
text-success-lighter
text-success-dark
text-success-darker
text-success-emphasis
text-info-subtle
text-info-light
text-info-lighter
text-info-dark
text-info-darker
text-info-emphasis
text-warning-subtle
text-warning-light
text-warning-lighter
text-warning-dark
text-warning-darker
text-warning-emphasis
text-danger-subtle
text-danger-light
text-danger-lighter
text-danger-dark
text-danger-darker
text-danger-emphasis

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 {
--phoenix-text-opacity: 1;
color: rgba(var(--phoenix-primary-rgb), var(--phoenix-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|
2024 ©Themewagon

v1.18.1

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

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