+ + Documentation +
+Colors
+Convey meaning through color with a handful of color utility classes.
+Contextual colors
+A background fill can be applied to a container using one of the .bg-[color] classes.
+
.bg-primary
+ +
.bg-secondary
+ +
.bg-success
+ +
.bg-info
+ +
.bg-warning
+ +
.bg-danger
+ <div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-primary rounded mr-4"></div>
+ <div>
+ <strong>Primary</strong><br />
+ <code>.bg-primary</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-secondary rounded mr-4"></div>
+ <div>
+ <strong>Secondary</strong><br />
+ <code>.bg-secondary</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-success rounded mr-4"></div>
+ <div>
+ <strong>Success</strong><br />
+ <code>.bg-success</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-info rounded mr-4"></div>
+ <div>
+ <strong>Info</strong><br />
+ <code>.bg-info</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-warning rounded mr-4"></div>
+ <div>
+ <strong>Warning</strong><br />
+ <code>.bg-warning</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-danger rounded mr-4"></div>
+ <div>
+ <strong>Danger</strong><br />
+ <code>.bg-danger</code>
+ </div>
+</div>
+ Other colors
+Instead of using contextual classes you can use ordinary color names.
++
.bg-blue
+ +
.bg-azure
+ +
.bg-indigo
+ +
.bg-purple
+ +
.bg-pink
+ +
.bg-red
+ +
.bg-orange
+ +
.bg-yellow
+ +
.bg-lime
+ +
.bg-green
+ +
.bg-teal
+ +
.bg-cyan
+ +
.bg-gray
+ +
.bg-gray-dark
+ <div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue rounded mr-4"></div>
+ <div>
+ <strong>Blue</strong><br />
+ <code>.bg-blue</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-azure rounded mr-4"></div>
+ <div>
+ <strong>Azure</strong><br />
+ <code>.bg-azure</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-indigo rounded mr-4"></div>
+ <div>
+ <strong>Indigo</strong><br />
+ <code>.bg-indigo</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-purple rounded mr-4"></div>
+ <div>
+ <strong>Purple</strong><br />
+ <code>.bg-purple</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-pink rounded mr-4"></div>
+ <div>
+ <strong>Pink</strong><br />
+ <code>.bg-pink</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-red rounded mr-4"></div>
+ <div>
+ <strong>Red</strong><br />
+ <code>.bg-red</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-orange rounded mr-4"></div>
+ <div>
+ <strong>Orange</strong><br />
+ <code>.bg-orange</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-yellow rounded mr-4"></div>
+ <div>
+ <strong>Yellow</strong><br />
+ <code>.bg-yellow</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-lime rounded mr-4"></div>
+ <div>
+ <strong>Lime</strong><br />
+ <code>.bg-lime</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-green rounded mr-4"></div>
+ <div>
+ <strong>Green</strong><br />
+ <code>.bg-green</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-teal rounded mr-4"></div>
+ <div>
+ <strong>Teal</strong><br />
+ <code>.bg-teal</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-cyan rounded mr-4"></div>
+ <div>
+ <strong>Cyan</strong><br />
+ <code>.bg-cyan</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-gray rounded mr-4"></div>
+ <div>
+ <strong>Gray</strong><br />
+ <code>.bg-gray</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-gray-dark rounded mr-4"></div>
+ <div>
+ <strong>Dark gray</strong><br />
+ <code>.bg-gray-dark</code>
+ </div>
+</div>
+ Tinting backgrounds
+Translucent background fills to shade an element against a background. You can use one of few suffixes:
+ -darkest, -darker, -dark, -lightest, -lighter or -light.
+
.bg-blue-darkest
+ +
.bg-blue-darker
+ +
.bg-blue-dark
+ +
.bg-blue
+ +
.bg-blue-light
+ +
.bg-blue-lighter
+ +
.bg-blue-lightest
+ <div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue-darkest rounded mr-4"></div>
+ <div>
+ <strong>Darkest blue</strong><br />
+ <code>.bg-blue-darkest</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue-darker rounded mr-4"></div>
+ <div>
+ <strong>Darker blue</strong><br />
+ <code>.bg-blue-darker</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue-dark rounded mr-4"></div>
+ <div>
+ <strong>Dark blue</strong><br />
+ <code>.bg-blue-dark</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue rounded mr-4"></div>
+ <div>
+ <strong>Default blue</strong><br />
+ <code>.bg-blue</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue-light rounded mr-4"></div>
+ <div>
+ <strong>Light blue</strong><br />
+ <code>.bg-blue-light</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue-lighter rounded mr-4"></div>
+ <div>
+ <strong>Lighter blue</strong><br />
+ <code>.bg-blue-lighter</code>
+ </div>
+</div>
+<div class="d-flex align-items-center mb-4">
+ <div class="w-7 h-7 bg-blue-lightest rounded mr-4"></div>
+ <div>
+ <strong>Lightest blue</strong><br />
+ <code>.bg-blue-lightest</code>
+ </div>
+</div>
+