Backgrounds
Basic Colors
.bg-primary
.bg-secondary
.bg-success
.bg-warning
.bg-danger
.bg-info
.bg-light
.bg-dark
<!-- Primary -->
<div class="bg-primary text-light p-4 mb-5">.bg-primary</div>
<!-- Secondary -->
<div class="bg-secondary text-light p-4 mb-5">.bg-secondary</div>
<!-- Success -->
<div class="bg-success text-light p-4 mb-5">.bg-success</div>
<!-- Warning -->
<div class="bg-warning text-light p-4 mb-5">.bg-warning</div>
<!-- Danger -->
<div class="bg-danger text-light p-4 mb-5">.bg-danger</div>
<!-- Info -->
<div class="bg-info text-light p-4 mb-5">.bg-info</div>
<!-- Light -->
<div class="bg-light text-dark p-4 mb-5">.bg-light</div>
<!-- Dark -->
<div class="bg-dark text-light p-4">.bg-dark</div>
University Colors
.bg-blue
.bg-aqua
.bg-fk
.bg-fkg
.bg-fp
.bg-fhik
.bg-fhbd
.bg-ftrc
<!-- Blue -->
<div class="bg-blue text-light p-4 mb-5">.bg-blue</div>
<!-- Aqua -->
<div class="bg-aqua text-light p-4 mb-5">.bg-aqua</div>
<!-- FK -->
<div class="bg-fk text-light p-4 mb-5">.bg-fk</div>
<!-- FKG -->
<div class="bg-fkg text-light p-4 mb-5">.bg-fkg</div>
<!-- FP -->
<div class="bg-fp text-light p-4 mb-5">.bg-fp</div>
<!-- FHIK -->
<div class="bg-fhik text-light p-4 mb-5">.bg-fhik</div>
<!-- FHBD -->
<div class="bg-fhbd text-light p-4 mb-5">.bg-fhbd</div>
<!-- FTRC -->
<div class="bg-ftrc text-light p-4">.bg-ftrc</div>
Gray Colors
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
<!-- Gray 100 -->
<div class="bg-gray-100 text-dark p-4 mb-5">.bg-gray-100</div>
<!-- Gray 200 -->
<div class="bg-gray-200 text-dark p-4 mb-5">.bg-gray-200</div>
<!-- Gray 300 -->
<div class="bg-gray-300 text-light p-4 mb-5">.bg-gray-300</div>
<!-- Gray 400 -->
<div class="bg-gray-400 text-light p-4 mb-5">.bg-gray-400</div>
<!-- Gray 500 -->
<div class="bg-gray-500 text-light p-4 mb-5">.bg-gray-500</div>
<!-- Gray 600 -->
<div class="bg-gray-600 text-light p-4 mb-5">.bg-gray-600</div>
<!-- Gray 700 -->
<div class="bg-gray-700 text-light p-4 mb-5">.bg-gray-700</div>
<!-- Gray 800 -->
<div class="bg-gray-800 text-light p-4 mb-5">.bg-gray-800</div>
<!-- Gray 900 -->
<div class="bg-gray-900 text-light p-4">.bg-gray-900</div>
Subtle Colors
.bg-primary-subtle
.bg-secondary-subtle
.bg-success-subtle
.bg-warning-subtle
.bg-danger-subtle
.bg-info-subtle
<!-- Primary subtle -->
<div class="bg-primary-subtle text-primary p-4 mb-5">.bg-primary-subtle</div>
<!-- Secondary subtle -->
<div class="bg-secondary-subtle text-secondary p-4 mb-5">.bg-secondary-subtle</div>
<!-- Success subtle -->
<div class="bg-success-subtle text-success p-4 mb-5">.bg-success-subtle</div>
<!-- Warning subtle -->
<div class="bg-warning-subtle text-warning p-4 mb-5">.bg-warning-subtle</div>
<!-- Danger subtle -->
<div class="bg-danger-subtle text-danger p-4 mb-5">.bg-danger-subtle</div>
<!-- Info subtle -->
<div class="bg-info-subtle text-info p-4">.bg-info-subtle</div>
University Subtle Colors
.bg-blue-subtle
.bg-aqua-subtle
.bg-fk-subtle
.bg-fkg-subtle
.bg-fp-subtle
.bg-fhik-subtle
.bg-fhbd-subtle
.bg-ftrc-subtle
<!-- Blue subtle -->
<div class="bg-blue-subtle text-blue p-4 mb-5">.bg-blue-subtle</div>
<!-- Aqua subtle -->
<div class="bg-aqua-subtle text-aqua p-4 mb-5">.bg-aqua-subtle</div>
<!-- FK subtle -->
<div class="bg-fk-subtle text-fk p-4 mb-5">.bg-fk-subtle</div>
<!-- FKG subtle -->
<div class="bg-fkg-subtle text-fkg p-4 mb-5">.bg-fkg-subtle</div>
<!-- FP subtle -->
<div class="bg-fp-subtle text-fp p-4 mb-5">.bg-fp-subtle</div>
<!-- FHIK subtle -->
<div class="bg-fhik-subtle text-fhik p-4 mb-5">.bg-fhik-subtle</div>
<!-- FHBD subtle -->
<div class="bg-fhbd-subtle text-fhbd p-4 mb-5">.bg-fhbd-subtle</div>
<!-- FTRC subtle -->
<div class="bg-ftrc-subtle text-ftrc p-4 mb-0">.bg-ftrc-subtle</div>
Gradient Colors
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-warning
.bg-gradient-danger
.bg-gradient-info
<!-- Gradient primary -->
<div class="bg-gradient-primary text-light p-4 mb-5">.bg-gradient-primary</div>
<!-- Gradient secondary -->
<div class="bg-gradient-secondary text-light p-4 mb-5">.bg-gradient-secondary</div>
<!-- Gradient success -->
<div class="bg-gradient-success text-light p-4 mb-5">.bg-gradient-success</div>
<!-- Gradient warning -->
<div class="bg-gradient-warning text-light p-4 mb-5">.bg-gradient-warning</div>
<!-- Gradient danger -->
<div class="bg-gradient-danger text-light p-4 mb-5">.bg-gradient-danger</div>
<!-- Gradient info -->
<div class="bg-gradient-info text-light p-4">.bg-gradient-info</div>
University Gradient Colors
.bg-gradient-blue
.bg-gradient-aqua
.bg-gradient-fk
.bg-gradient-fkg
.bg-gradient-fp
.bg-gradient-fhik
.bg-gradient-fhbd
.bg-gradient-ftrc
<!-- Gradient blue -->
<div class="bg-gradient-blue text-light p-4 mb-5">.bg-gradient-blue</div>
<!-- Gradient aqua -->
<div class="bg-gradient-aqua text-light p-4 mb-5">.bg-gradient-aqua</div>
<!-- Gradient fk -->
<div class="bg-gradient-fk text-light p-4 mb-5">.bg-gradient-fk</div>
<!-- Gradient fkg -->
<div class="bg-gradient-fkg text-light p-4 mb-5">.bg-gradient-fkg</div>
<!-- Gradient fp -->
<div class="bg-gradient-fp text-light p-4 mb-5">.bg-gradient-fp</div>
<!-- Gradient fhik -->
<div class="bg-gradient-fhik text-light p-4 mb-5">.bg-gradient-fhik</div>
<!-- Gradient fhbd -->
<div class="bg-gradient-fhbd text-light p-4 mb-5">.bg-gradient-fhbd</div>
<!-- Gradient ftrc -->
<div class="bg-gradient-ftrc text-light p-4 mb-5">.bg-gradient-ftrc</div>