Texts
Basic Colors
.text-primary
.text-secondary
.text-success
.text-warning
.text-danger
.text-info
.text-light
.text-dark
<!-- Text primary -->
<span class="text-primary d-block p-2 mb-2">.text-primary</span>
<!-- Text secondary -->
<span class="text-secondary d-block p-2 mb-2">.text-secondary</span>
<!-- Text success -->
<span class="text-success d-block p-2 mb-2">.text-success</span>
<!-- Text warning -->
<span class="text-warning d-block p-2 mb-2">.text-warning</span>
<!-- Text danger -->
<span class="text-danger d-block p-2 mb-2">.text-danger</span>
<!-- Text info -->
<span class="text-info d-block p-2 mb-2">.text-info</span>
<!-- Text light -->
<span class="text-light bg-gray-500 d-block p-2 mb-2">.text-light</span>
<!-- Text dark -->
<span class="text-dark d-block p-2">.text-dark</span>
Gray Colors
.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
<!-- Gray 100 -->
<span class="text-gray-100 d-block p-2 mb-2">.text-gray-100</span>
<!-- Gray 200 -->
<span class="text-gray-200 d-block p-2 mb-2">.text-gray-200</span>
<!-- Gray 300 -->
<span class="text-gray-300 d-block p-2 mb-2">.text-gray-300</span>
<!-- Gray 400 -->
<span class="text-gray-400 d-block p-2 mb-2">.text-gray-400</span>
<!-- Gray 500 -->
<span class="text-gray-500 d-block p-2 mb-2">.text-gray-500</span>
<!-- Gray 600 -->
<span class="text-gray-600 d-block p-2 mb-2">.text-gray-600</span>
<!-- Gray 700 -->
<span class="text-gray-700 d-block p-2 mb-2">.text-gray-700</span>
<!-- Gray 800 -->
<span class="text-gray-800 d-block p-2 mb-2">.text-gray-800</span>
<!-- Gray 900 -->
<span class="text-gray-900 d-block p-2">.text-gray-900</span>
University Colors
.text-blue
.text-aqua
.text-fk
.text-fkg
.text-fp
.text-fhik
.text-fhbd
.text-ftrc
<!-- Text blue -->
<span class="text-blue d-block p-2 mb-2">.text-blue</span>
<!-- Text aqua -->
<span class="text-aqua d-block p-2 mb-2">.text-aqua</span>
<!-- Text fk -->
<span class="text-fk d-block p-2 mb-2">.text-fk</span>
<!-- Text fkg -->
<span class="text-fkg d-block p-2 mb-2">.text-fkg</span>
<!-- Text fp -->
<span class="text-fp d-block p-2 mb-2">.text-fp</span>
<!-- Text fhik -->
<span class="text-fhik d-block p-2 mb-2">.text-fhik</span>
<!-- Text fhbd -->
<span class="text-fhbd d-block p-2 mb-2">.text-fhbd</span>
<!-- Text ftrc -->
<span class="text-ftrc d-block p-2">.text-ftrc</span>
Hover Colors
.text-hover-primary
.text-hover-secondary
.text-hover-success
.text-hover-warning
.text-hover-danger
.text-hover-info
.text-hover-light
.text-hover-dark
<!-- Hover primary -->
<span class="text-hover-primary d-block p-2 mb-2">.text-hover-primary</span>
<!-- Hover secondary -->
<span class="text-hover-secondary d-block p-2 mb-2">.text-hover-secondary</span>
<!-- Hover success -->
<span class="text-hover-success d-block p-2 mb-2">.text-hover-success</span>
<!-- Hover warning -->
<span class="text-hover-warning d-block p-2 mb-2">.text-hover-warning</span>
<!-- Hover danger -->
<span class="text-hover-danger d-block p-2 mb-2">.text-hover-danger</span>
<!-- Hover info -->
<span class="text-hover-info d-block p-2 mb-2">.text-hover-info</span>
<!-- Hover light -->
<span class="text-hover-light d-block p-2 mb-2">.text-hover-light</span>
<!-- Hover dark -->
<span class="text-hover-dark d-block p-2">.text-hover-dark</span>
Hover University Colors
.text-hover-blue
.text-hover-aqua
.text-hover-fk
.text-hover-fkg
.text-hover-fp
.text-hover-fhik
.text-hover-fhbd
.text-hover-ftrc
<!-- Hover blue -->
<span class="text-hover-blue d-block p-2 mb-2">.text-hover-blue</span>
<!-- Hover aqua -->
<span class="text-hover-aqua d-block p-2 mb-2">.text-hover-aqua</span>
<!-- Hover fk -->
<span class="text-hover-fk d-block p-2 mb-2">.text-hover-fk</span>
<!-- Hover fkg -->
<span class="text-hover-fkg d-block p-2 mb-2">.text-hover-fkg</span>
<!-- Hover fp -->
<span class="text-hover-fp d-block p-2 mb-2">.text-hover-fp</span>
<!-- Hover fhik -->
<span class="text-hover-fhik d-block p-2 mb-2">.text-hover-fhik</span>
<!-- Hover fhbd -->
<span class="text-hover-fhbd d-block p-2 mb-2">.text-hover-fhbd</span>
<!-- Hover ftrc -->
<span class="text-hover-ftrc d-block p-2">.text-hover-ftrc</span>
Subtle Colors
.text-primary-subtle
.text-secondary-subtle
.text-success-subtle
.text-warning-subtle
.text-danger-subtle
.text-info-subtle
<!-- Primary subtle -->
<span class="text-primary-subtle bg-primary-subtle d-block p-2 mb-2">.text-primary-subtle</span>
<!-- Secondary subtle -->
<span class="text-secondary-subtle bg-secondary-subtle d-block p-2 mb-2">.text-secondary-subtle</span>
<!-- Success subtle -->
<span class="text-success-subtle bg-success-subtle d-block p-2 mb-2">.text-success-subtle</span>
<!-- Warning subtle -->
<span class="text-warning-subtle bg-warning-subtle d-block p-2 mb-2">.text-warning-subtle</span>
<!-- Danger subtle -->
<span class="text-danger-subtle bg-danger-subtle d-block p-2 mb-2">.text-danger-subtle</span>
<!-- Info subtle -->
<span class="text-info-subtle bg-info-subtle d-block p-2">.text-info-subtle</span>
Active Colors
.text-active-primary.active
.text-active-success.active
.text-active-danger.active
<!-- Active primary -->
<span class="text-active-primary active d-block p-2 mb-2">.text-active-primary.active</span>
<!-- Active success -->
<span class="text-active-success active d-block p-2 mb-2">.text-active-success.active</span>
<!-- Active danger -->
<span class="text-active-danger active d-block p-2">.text-active-danger.active</span>
Parent Hover & Active Colors
Hover this box —
.parent-hover-primary
Parent has ".active" —
.parent-active-success
<!-- Parent hover -->
<div class="parent-hover bg-light p-4 mb-2">
Hover this box —
<span class="parent-hover-primary">.parent-hover-primary</span>
</div>
<!-- Parent active -->
<div class="parent-active active bg-light p-4">
Parent has ".active" —
<span class="parent-active-success">.parent-active-success</span>
</div>
Alignments, Decorations & Transforms
.text-center
.text-decoration-underline
.text-uppercase
<!-- Text center -->
<div class="text-center bg-light p-2 mb-2">.text-center</div>
<!-- Text decoration underline -->
<div class="text-decoration-underline p-2 mb-2">.text-decoration-underline</div>
<!-- Text uppercase -->
<div class="text-uppercase p-2">.text-uppercase</div>
Other Text Styles
.text-nowrap keeps this on one line even though it is long
.text-break Supercalifragilisticexpialidocious
<!-- Text nowrap -->
<div class="text-nowrap overflow-hidden w-200px">...</div>
<!-- Text break -->
<div class="text-break w-200px">Supercalifragilisticexpialidocious</div>
Cursors
.cursor-pointer
.cursor-default
.cursor-move
<!-- Cursor pointer -->
<span class="cursor-pointer bg-light d-inline-block p-2 me-2">.cursor-pointer</span>
<!-- Cursor default -->
<span class="cursor-default bg-light d-inline-block p-2 me-2">.cursor-default</span>
<!-- Cursor move -->
<span class="cursor-move bg-light d-inline-block p-2">.cursor-move</span>