Documentation v8.0.36

Preview Downloads Purchase

Text Colors

Use extended text helper classes defined in src/sass/components/helpers/_text.scssfor more advance use cases. Colorize text with color utilities as shown

.text-white

.text-primary

.text-secondary

.text-light

.text-success

.text-info

.text-warning

.text-danger

.text-dark

.text-muted

.text-gray-100

.text-gray-200

.text-gray-300

.text-gray-400

.text-gray-500

.text-gray-600

.text-gray-700

.text-gray-800

.text-gray-900

<div class="text-white"></div>
<div class="text-primary"></div>
<div class="text-secondary"></div>
<div class="text-light"></div>
<div class="text-success"></div>
<div class="text-info"></div>
<div class="text-warning"></div>
<div class="text-danger"></div>
<div class="text-dark"></div>
<div class="text-muted"></div>
<div class="text-gray-100"></div>
<div class="text-gray-200"></div>
<div class="text-gray-300"></div>
<div class="text-gray-400"></div>
<div class="text-gray-500"></div>
<div class="text-gray-600"></div>
<div class="text-gray-700"></div>
<div class="text-gray-800"></div>
<div class="text-gray-900"></div>

Light Colors

Use .text-light-{color}class to set an element's light color defined with $theme-light-colorsin sass/_variables.scss:

.text-light-primary

.text-light-success

.text-light-info

.text-light-warning

.text-light-danger

.text-light-dark

<div class="text-light-primary bg-primary"></div>
<div class="text-light-success bg-success"></div>
<div class="text-light-info bg-info"></div>
<div class="text-light-warning bg-warning"></div>
<div class="text-light-danger bg-danger"></div>
<div class="text-light-dark bg-dark"></div>

Inverse Colors

Use .text-inverse-{color}class to set an element's inverse color defined with $theme-inverse-colorsin sass/_variables.scss:

.text-light-white

.text-light-primary

.text-light-secondary

.text-light-light

.text-light-success

.text-light-info

.text-light-warning

.text-light-danger

.text-light-dark

<div class="text-inverse-white bg-white"></div>
<div class="text-inverse-primary bg-primary"></div>
<div class="text-inverse-secondary bg-secondary"></div>
<div class="text-inverse-light bg-light"></div>
<div class="text-inverse-success bg-success"></div>
<div class="text-inverse-info bg-info"></div>
<div class="text-inverse-warning bg-warning"></div>
<div class="text-inverse-danger bg-danger"></div>
<div class="text-inverse-dark bg-dark"></div>

Inverse Hover Colors

Use .text-hover-inverse-{color}class to set an element's hover inverse color defined with $theme-inverse-colorsin sass/_variables.scss:

.text-hover-inverse-white

.text-hover-inverse-primary

.text-hover-inverse-secondary

.text-hover-inverse-light

.text-hover-inverse-success

.text-hover-inverse-info

.text-hover-inverse-warning

.text-hover-inverse-danger

.text-hover-inverse-dark

<div class="text-hover-inverse-white bg-hover-white"></div>
<div class="text-hover-inverse-primary bg-hover-primary"></div>
<div class="text-hover-inverse-secondary bg-hover-secondary"></div>
<div class="text-hover-inverse-light bg-hover-light"></div>
<div class="text-hover-inverse-success bg-hover-success"></div>
<div class="text-hover-inverse-info bg-hover-info"></div>
<div class="text-hover-inverse-warning bg-hover-warning"></div>
<div class="text-hover-inverse-danger bg-hover-danger"></div>
<div class="text-hover-inverse-dark bg-hover-dark"></div>

Inverse Active Colors

Use .text-active-inverse-{color}class to set an element's active inverse color when it has .activeclass:

.text-active-inverse-white

.text-active-inverse-primary

.text-active-inverse-secondary

.text-active-inverse-light

.text-active-inverse-success

.text-active-inverse-info

.text-active-inverse-warning

.text-active-inverse-danger

.text-active-inverse-dark

<div class="text-active-inverse-white bg-active-white active"></div>
<div class="text-active-inverse-primary bg-active-primary active"></div>
<div class="text-active-inverse-secondary bg-active-secondary active"></div>
<div class="text-active-inverse-light bg-active-light active"></div>
<div class="text-active-inverse-success bg-active-success active"></div>
<div class="text-active-inverse-info bg-active-info active"></div>
<div class="text-active-inverse-warning bg-active-warning active"></div>
<div class="text-active-inverse-danger bg-active-danger active"></div>
<div class="text-active-inverse-dark bg-active-dark active"></div>