Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Bootstrap documentation


Theme palette

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Primary light
Secondary light
Success light
Danger light
Warning light
Info light

gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

Background color

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>

.bg-primary-light
.bg-secondary-light
.bg-success-light
.bg-danger-light
.bg-warning-light
.bg-info-light
<div class="bg-primary-light">.bg-primary</div>
<div class="bg-secondary-light">.bg-secondary</div>
<div class="bg-success-light">.bg-success</div>
<div class="bg-danger-light">.bg-danger</div>
<div class="bg-warning-light">.bg-warning</div>
<div class="bg-info-light">.bg-info</div>

.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="bg-gray-100 text-black-50">.bg-gray-100</div>
<div class="bg-gray-200 text-black-50">.bg-gray-200</div>
<div class="bg-gray-300 text-black-50">.bg-gray-300</div>
<div class="bg-gray-400 text-black-50">.bg-gray-400</div>
<div class="bg-gray-500 text-black-50">.bg-gray-500</div>
<div class="bg-gray-600 text-black-50">.bg-gray-600</div>
<div class="bg-gray-700 text-black-50">.bg-gray-700</div>
<div class="bg-gray-800 text-black-50">.bg-gray-800</div>
<div class="bg-gray-900 text-black-50">.bg-gray-900</div>                                        

Text color

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-white-50

.text-black-50

<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 bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="text-black-50">.text-black-50</p>

.text-primary-light

.text-secondary-light

.text-success-light

.text-danger-light

.text-warning-light

.text-info-light

<p class="text-primary-light">.text-primary</p>
<p class="text-secondary-light">.text-secondary</p>
<p class="text-success-light">.text-success</p>
<p class="text-danger-light">.text-danger</p>
<p class="text-warning-light">.text-warning</p>
<p class="text-info-light">.text-info</p>

.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

<p class="text-gray-100">.text-gray-100</p>
<p class="text-gray-200">.text-gray-200</p>
<p class="text-gray-300">.text-gray-300</p>
<p class="text-gray-400">.text-gray-400</p>
<p class="text-gray-500">.text-gray-500</p>
<p class="text-gray-600">.text-gray-600</p>
<p class="text-gray-700">.text-gray-700</p>
<p class="text-gray-800">.text-gray-800</p>
<p class="text-gray-900">.text-gray-900</p>

Underline color

Text underline primary

Text underline secondary

Text underline success

Text underline danger

Text underline warning

Text underline info

Text underline light

Text underline dark

Text underline primary light

Text underline secondary light

Text underline success light

Text underline danger light

Text underline warning light

Text underline info light

<h2><span class="text-underline-primary">Text underline primary</span></h2>
<h2><span class="text-underline-secondary">Text underline secondary</span></h2>
<h2><span class="text-underline-success">Text underline success</span></h2>
<h2><span class="text-underline-danger">Text underline danger</span></h2>
<h2><span class="text-underline-warning">Text underline warning</span></h2>
<h2><span class="text-underline-info">Text underline info</span></h2>
<h2><span class="text-underline-light">Text underline light</span></h2>
<h2><span class="text-underline-dark">Text underline dark</span></h2>
 
<h2><span class="text-underline-primary-light">Text underline primary light</span></h2>
<h2><span class="text-underline-secondary-light">Text underline secondary light</span></h2>
<h2><span class="text-underline-success-light">Text underline success light</span></h2>
<h2><span class="text-underline-danger-light">Text underline danger light</span></h2>
<h2><span class="text-underline-warning-light">Text underline warning light</span></h2>
<h2><span class="text-underline-info-light">Text underline info light</span></h2>