Main colors
View our main colors.
Primary
#406AFF
Secondary
#6C757D
Success
#14CFA0
Danger
#ED5565
Warning
#FF934C
Info
#2CBED2
Light
#F8F9FA
Dark
#343A40
Facebook
#3578E5
Twitter
#1DA1F2
Linkedin
#0077B5
Pinterest
#E60023
Youtube
#FF0000
Dribble
#EA4C89
Behance
#0057FF
Github
#24292E
Grays
View our main gray palette.
Gray 100
#F8F9FA
Gray 200
#E9ECEF
Gray 300
#DEE2E6
Gray 400
#CED4DA
Gray 500
#ADB5BD
Gray 600
#6C757D
Gray 700
#495057
Gray 800
#343A40
Gray 900
#212529
Contextual background colors
Easily set the background of an element to any contextual class.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
.bg-facebook
.bg-twitter
.bg-linkedin
.bg-pinterest
.bg-youtube
.bg-dribble
.bg-behance
.bg-github
.bg-gradient-blue
.bg-gradient-green
.bg-gradient-red
.bg-gradient-purple
.bg-gradient-blue-green
.bg-gradient-blue-purple
.bg-gradient-red-purple
.bg-gradient-red-orange
<div class="p-3 bg-primary text-white">.bg-primary</div>
<div class="p-3 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 bg-success text-white">.bg-success</div>
<div class="p-3 bg-danger text-white">.bg-danger</div>
<div class="p-3 bg-warning text-dark">.bg-warning</div>
<div class="p-3 bg-info text-white">.bg-info</div>
<div class="p-3 bg-light text-dark">.bg-light</div>
<div class="p-3 bg-dark text-white">.bg-dark</div>
<div class="p-3 bg-white text-dark">.bg-white</div>
<div class="p-3 bg-transparent text-dark">.bg-transparent</div>
<div class="p-3 bg-facebook text-white">.bg-facebook</div>
<div class="p-3 bg-twitter text-white">.bg-twitter</div>
<div class="p-3 bg-linkedin text-white">.bg-linkedin</div>
<div class="p-3 bg-pinterest text-white">.bg-pinterest</div>
<div class="p-3 bg-youtube text-white">.bg-youtube</div>
<div class="p-3 bg-dribble text-white">.bg-dribble</div>
<div class="p-3 bg-behance text-white">.bg-behance</div>
<div class="p-3 bg-github text-white">.bg-github</div>
<div class="p-3 bg-gradient-blue text-white">.bg-gradient-blue</div>
<div class="p-3 bg-gradient-green text-white">.bg-gradient-green</div>
<div class="p-3 bg-gradient-red text-white">.bg-gradient-red</div>
<div class="p-3 bg-gradient-purple text-white">.bg-gradient-purple</div>
<div class="p-3 bg-gradient-blue-green text-white">.bg-gradient-blue-green</div>
<div class="p-3 bg-gradient-blue-purple text-white">.bg-gradient-blue-purple</div>
<div class="p-3 bg-gradient-red-purple text-white">.bg-gradient-red-purple</div>
<div class="p-3 bg-gradient-red-orange text-white">.bg-gradient-red-orange</div>
Text colors
Utility classes for text colors.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
.text-facebook
.text-twitter
.text-linkedin
.text-pinterest
.text-youtube
.text-dribble
.text-behance
.text-github
<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-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="text-facebook">.text-facebook</p>
<p class="text-twitter">.text-twitter</p>
<p class="text-linkedin">.text-linkedin</p>
<p class="text-pinterest">.text-pinterest</p>
<p class="text-youtube">.text-youtube</p>
<p class="text-dribble">.text-dribble</p>
<p class="text-behance">.text-behance</p>
<p class="text-github">.text-github</p>