Colors
Background Colors
bg-{COLOR} applies background colors to elements.
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light-gray
bg-light-gray-2
bg-white
bg-black
bg-dark-gray
bg-dark-gray-2
bg-dark-gray-3
Code
<span class="bg-primary"></span>
<span class="bg-secondary"></span>
<span class="bg-success"></span>
<span class="bg-danger"></span>
<span class="bg-warning"></span>
<span class="bg-info"></span>
<span class="bg-light-gray"></span>
<span class="bg-light-gray-2"></span>
<span class="bg-white"></span>
<span class="bg-black"></span>
<span class="bg-dark-gray"></span>
<span class="bg-dark-gray-2"></span>
<span class="bg-dark-gray-3"></span>
Text Colors
c-{COLOR} applies text colors to elements.
c-primary
c-secondary
c-success
c-danger
c-warning
c-info
c-light-gray
c-light-gray-2
c-white
c-black
c-dark-gray
c-dark-gray-2
c-dark-gray-3
Code
<span class="c-primary"></span>
<span class="c-secondary"></span>
<span class="c-success"></span>
<span class="c-danger"></span>
<span class="c-warning"></span>
<span class="c-info"></span>
<span class="c-light-gray"></span>
<span class="c-light-gray-2"></span>
<span class="c-white"></span>
<span class="c-black"></span>
<span class="c-dark-gray"></span>
<span class="c-dark-gray-2"></span>
<span class="c-dark-gray-3"></span>
Border Colors
border-{COLOR} applies border colors to elements.
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light-gray
border-light-gray-2
border-white
border-black
border-dark-gray
border-dark-gray-2
border-dark-gray-3
Code
<span class="border-primary"></span>
<span class="border-secondary"></span>
<span class="border-success"></span>
<span class="border-danger"></span>
<span class="border-warning"></span>
<span class="border-info"></span>
<span class="border-light-gray"></span>
<span class="border-light-gray-2"></span>
<span class="border-white"></span>
<span class="border-black"></span>
<span class="border-dark-gray"></span>
<span class="border-dark-gray-2"></span>
<span class="border-dark-gray-3"></span>
Contrast Colors
c-contrast-{COLOR} applies the contrasting text colors of the color provided to elements.
c-contrast-primary
c-contrast-secondary
c-contrast-success
c-contrast-danger
c-contrast-warning
c-contrast-info
c-contrast-light-gray
c-contrast-light-gray-2
c-contrast-white
c-contrast-black
c-contrast-dark-gray
c-contrast-dark-gray-2
c-contrast-dark-gray-3
Code
<span class="bg-primary c-contrast-primary"></span>
<span class="bg-secondary c-contrast-secondary"></span>
<span class="bg-success c-contrast-success"></span>
<span class="bg-danger c-contrast-danger"></span>
<span class="bg-warning c-contrast-warning"></span>
<span class="bg-info c-contrast-info"></span>
<span class="bg-light-gray c-contrast-light-gray"></span>
<span class="bg-light-gray-2 c-contrast-light-gray-2"></span>
<span class="bg-white c-contrast-white"></span>
<span class="bg-black c-contrast-black"></span>
<span class="bg-dark-gray c-contrast-dark-gray"></span>
<span class="bg-dark-gray-2 c-contrast-dark-gray-2"></span>
<span class="bg-dark-gray-3 c-contrast-dark-gray-3"></span>
bg-contrast-{COLOR} applies the contrasting background colors of the color provided to
elements.
bg-contrast-primary
bg-contrast-secondary
bg-contrast-success
bg-contrast-danger
bg-contrast-warning
bg-contrast-info
bg-contrast-light-gray
bg-contrast-light-gray-2
bg-contrast-white
bg-contrast-black
bg-contrast-dark-gray
bg-contrast-dark-gray-2
bg-contrast-dark-gray-3
Code
<span class="bg-contrast-primary c-primary"></span>
<span class="bg-contrast-secondary c-secondary"></span>
<span class="bg-contrast-success c-success"></span>
<span class="bg-contrast-danger c-danger"></span>
<span class="bg-contrast-warning c-warning"></span>
<span class="bg-contrast-info c-info"></span>
<span class="bg-contrast-light-gray c-light-gray"></span>
<span class="bg-contrast-light-gray-2 c-light-gray-2"></span>
<span class="bg-contrast-white c-white"></span>
<span class="bg-contrast-black c-black"></span>
<span class="bg-contrast-dark-gray c-dark-gray"></span>
<span class="bg-contrast-dark-gray-2 c-dark-gray-2"></span>
<span class="bg-contrast-dark-gray-3 c-dark-gray-3"></span>
Faded Colors
c25-{COLOR}, c50-{COLOR}, c75-{COLOR} applies the faded text colors
of the color provided to elements.
c25-primary
c50-primary
c75-primary
c25-primary
c50-primary
c75-primary
c25-secondary
c50-secondary
c75-secondary
c25-secondary
c50-secondary
c75-secondary
c25-success
c50-success
c75-success
c25-success
c50-success
c75-success
c25-danger
c50-danger
c75-danger
c25-danger
c50-danger
c75-danger
c25-warning
c50-warning
c75-warning
c25-warning
c50-warning
c75-warning
c25-info
c50-info
c75-info
c25-info
c50-info
c75-info
c25-light-gray
c50-light-gray
c75-light-gray
c25-light-gray
c50-light-gray
c75-light-gray
c25-light-gray-2
c50-light-gray-2
c75-light-gray-2
c25-light-gray-2
c50-light-gray-2
c75-light-gray-2
c25-white
c50-white
c75-white
c25-white
c50-white
c75-white
c25-black
c50-black
c75-black
c25-black
c50-black
c75-black
c25-dark-gray
c50-dark-gray
c75-dark-gray
c25-dark-gray
c50-dark-gray
c75-dark-gray
c25-dark-gray-2
c50-dark-gray-2
c75-dark-gray-2
c25-dark-gray-2
c50-dark-gray-2
c75-dark-gray-2
c25-dark-gray-3
c50-dark-gray-3
c75-dark-gray-3
c25-dark-gray-3
c50-dark-gray-3
c75-dark-gray-3
Code
<span class="c25-primary"></span>
<span class="c25-secondary"></span>
<span class="c25-success"></span>
<span class="c25-danger"></span>
<span class="c25-warning"></span>
<span class="c25-info"></span>
<span class="c25-light-gray"></span>
<span class="c25-light-gray-2"></span>
<span class="c25-white"></span>
<span class="c25-black"></span>
<span class="c25-dark-gray"></span>
<span class="c25-dark-gray-2"></span>
<span class="c25-dark-gray-3"></span>
bg25-{COLOR}, bg50-{COLOR}, bg75-{COLOR} applies
a faded version of the background color to an element.
bg25-primary
bg50-primary
bg75-primary
bg25-primary
bg50-primary
bg75-primary
bg25-secondary
bg50-secondary
bg75-secondary
bg25-secondary
bg50-secondary
bg75-secondary
bg25-success
bg50-success
bg75-success
bg25-success
bg50-success
bg75-success
bg25-danger
bg50-danger
bg75-danger
bg25-danger
bg50-danger
bg75-danger
bg25-warning
bg50-warning
bg75-warning
bg25-warning
bg50-warning
bg75-warning
bg25-info
bg50-info
bg75-info
bg25-info
bg50-info
bg75-info
bg25-light-gray
bg50-light-gray
bg75-light-gray
bg25-light-gray
bg50-light-gray
bg75-light-gray
bg25-light-gray-2
bg50-light-gray-2
bg75-light-gray-2
bg25-light-gray-2
bg50-light-gray-2
bg75-light-gray-2
bg25-white
bg50-white
bg75-white
bg25-white
bg50-white
bg75-white
bg25-black
bg50-black
bg75-black
bg25-black
bg50-black
bg75-black
bg25-dark-gray
bg50-dark-gray
bg75-dark-gray
bg25-dark-gray
bg50-dark-gray
bg75-dark-gray
bg25-dark-gray-2
bg50-dark-gray-2
bg75-dark-gray-2
bg25-dark-gray-2
bg50-dark-gray-2
bg75-dark-gray-2
bg25-dark-gray-3
bg50-dark-gray-3
bg75-dark-gray-3
bg25-dark-gray-3
bg50-dark-gray-3
bg75-dark-gray-3
Code
<span class="bg50-primary"></span>
<span class="bg50-secondary"></span>
<span class="bg50-success"></span>
<span class="bg50-danger"></span>
<span class="bg50-warning"></span>
<span class="bg50-info"></span>
<span class="bg50-light-gray"></span>
<span class="bg50-light-gray-2"></span>
<span class="bg50-white"></span>
<span class="bg50-black"></span>
<span class="bg50-dark-gray"></span>
<span class="bg50-dark-gray-2"></span>
<span class="bg50-dark-gray-3"></span>
border25-{COLOR}, border50-{COLOR}, border75-{COLOR} applies
a faded version of the background color to an element.
border25-primary
border50-primary
border75-primary
border25-primary
border50-primary
border75-primary
border25-secondary
border50-secondary
border75-secondary
border25-secondary
border50-secondary
border75-secondary
border25-success
border50-success
border75-success
border25-success
border50-success
border75-success
border25-danger
border50-danger
border75-danger
border25-danger
border50-danger
border75-danger
border25-warning
border50-warning
border75-warning
border25-warning
border50-warning
border75-warning
border25-info
border50-info
border75-info
border25-info
border50-info
border75-info
border25-light-gray
border50-light-gray
border75-light-gray
border25-light-gray
border50-light-gray
border75-light-gray
border25-light-gray-2
border50-light-gray-2
border75-light-gray-2
border25-light-gray-2
border50-light-gray-2
border75-light-gray-2
border25-white
border50-white
border75-white
border25-white
border50-white
border75-white
border25-black
border50-black
border75-black
border25-black
border50-black
border75-black
border25-dark-gray
border50-dark-gray
border75-dark-gray
border25-dark-gray
border50-dark-gray
border75-dark-gray
border25-dark-gray-2
border50-dark-gray-2
border75-dark-gray-2
border25-dark-gray-2
border50-dark-gray-2
border75-dark-gray-2
border25-dark-gray-3
border50-dark-gray-3
border75-dark-gray-3
border25-dark-gray-3
border50-dark-gray-3
border75-dark-gray-3
Code
<span class="border75-primary"></span>
<span class="border75-secondary"></span>
<span class="border75-success"></span>
<span class="border75-danger"></span>
<span class="border75-warning"></span>
<span class="border75-info"></span>
<span class="border75-light-gray"></span>
<span class="border75-light-gray-2"></span>
<span class="border75-white"></span>
<span class="border75-black"></span>
<span class="border75-dark-gray"></span>
<span class="border75-dark-gray-2"></span>
<span class="border75-dark-gray-3"></span>