Text Colors
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
.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
.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
.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
.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>
