Colors

Use the .color class to create a color. You can also use the

Color Solid

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-purple
bg-pink
bg-orange
							
<div class="bg-primary text-white icon-100 rounded w-auto px-4">bg-primary</div>
<div class="bg-secondary text-white icon-100 rounded w-auto px-4">bg-secondary</div>
<div class="bg-success text-white icon-100 rounded w-auto px-4">bg-success</div>
<div class="bg-danger text-white icon-100 rounded w-auto px-4">bg-danger</div>
<div class="bg-warning text-white icon-100 rounded w-auto px-4">bg-warning</div>
<div class="bg-info text-white icon-100 rounded w-auto px-4">bg-info</div>
<div class="bg-light text-white icon-100 rounded w-auto px-4">bg-light</div>
<div class="bg-dark text-white icon-100 rounded w-auto px-4">bg-dark</div>
<div class="bg-purple text-white icon-100 rounded w-auto px-4">bg-purple</div>
<div class="bg-pink text-white icon-100 rounded w-auto px-4">bg-pink</div>
<div class="bg-orange text-white icon-100 rounded w-auto px-4">bg-orange</div>

Color Subtle

bg-primary-subtle
bg-secondary-subtle
bg-success-subtle
bg-danger-subtle
bg-warning-subtle
bg-info-subtle
bg-light-subtle
bg-dark-subtle
bg-purple-subtle
bg-pink-subtle
bg-orange-subtle
							
<div class="bg-primary-subtle text-primary icon-100 rounded w-auto px-4">bg-primary-subtle</div>
<div class="bg-secondary-subtle text-secondary icon-100 rounded w-auto px-4">bg-secondary-subtle
</div>
<div class="bg-success-subtle text-success icon-100 rounded w-auto px-4">bg-success-subtle</div>
<div class="bg-danger-subtle text-danger icon-100 rounded w-auto px-4">bg-danger-subtle</div>
<div class="bg-warning-subtle text-warning icon-100 rounded w-auto px-4">bg-warning-subtle</div>
<div class="bg-info-subtle text-info icon-100 rounded w-auto px-4">bg-info-subtle</div>
<div class="bg-light-subtle text-dark icon-100 rounded w-auto px-4">bg-light-subtle</div>
<div class="bg-dark-subtle text-light icon-100 rounded w-auto px-4">bg-dark-subtle</div>
<div class="bg-purple-subtle text-purple icon-100 rounded w-auto px-4">bg-purple-subtle</div>
<div class="bg-pink-subtle text-pink icon-100 rounded w-auto px-4">bg-pink-subtle</div>
<div class="bg-orange-subtle text-orange icon-100 rounded w-auto px-4">bg-orange-subtle</div>

Color Text

Text Primary

Text Secondary

Text Success

Text Danger

Text Warning

Text Info

Text Light

Text Dark

Text Purple

Text Pink

Text Orange

							
<p class="text-primary">Text Primary</p>
<p class="text-secondary">Text Secondary</p>
<p class="text-success">Text Success</p>
<p class="text-danger">Text Danger</p>
<p class="text-warning">Text Warning</p>
<p class="text-info">Text Info</p>
<p class="text-light">Text Light</p>
<p class="text-dark">Text Dark</p>
<p class="text-purple">Text Purple</p>
<p class="text-pink">Text Pink</p>
<p class="text-orange">Text Orange</p>

Color Opacity

Opacity 100
Opacity 75
Opacity 50
Opacity 25
							
<div class="bg-primary text-white icon-100 rounded w-auto px-4 opacity-100">Opacity 100</div>
<div class="bg-primary text-white icon-100 rounded w-auto px-4 opacity-75">Opacity 75</div>
<div class="bg-primary text-white icon-100 rounded w-auto px-4 opacity-50">Opacity 50</div>
<div class="bg-primary text-white icon-100 rounded w-auto px-4 opacity-25">Opacity 25</div>

Color Other

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
							
<div class="d-flex align-items-center">
        <div class="bg-gray-100 icon-100 rounded w-auto px-4">bg-gray-100</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-200 icon-100 rounded w-auto px-4">bg-gray-200</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-300 icon-100 rounded w-auto px-4">bg-gray-300</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-400 icon-100 rounded w-auto px-4">bg-gray-400</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-500 icon-100 rounded w-auto px-4">bg-gray-500</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-600 icon-100 rounded w-auto px-4">bg-gray-600</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-700 icon-100 rounded w-auto px-4">bg-gray-700</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-800 icon-100 rounded w-auto px-4">bg-gray-800</div>
    </div>
    <div class="d-flex align-items-center">
        <div class="bg-gray-900 icon-100 rounded w-auto px-4">bg-gray-900</div>
</div>