Background
Back ground of any elements can have easily changed color or alpha opacity by adding its corresponding classes. The color palette is taken from material design colors.
Bootstrap 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 white-text">.bg-primary</div>
<div class="bg-secondary white-text">.bg-secondary</div>
<div class="bg-success white-text">.bg-success</div>
<div class="bg-danger white-text">.bg-danger</div>
<div class="bg-warning white-text">.bg-warning</div>
<div class="bg-info white-text">.bg-info</div>
<div class="bg-light">.bg-light</div>
<div class="bg-dark white-text">.bg-dark</div>
<div class="bg-white">.bg-white</div>
<div class="bg-transparent">.bg-transparent</div>
Background color
.red-bg .lighter-5
.red-bg .lighter-4
.red-bg .lighter-3
.red-bg .lighter-2
.red-bg .lighter-1
.red-bg
.red-bg .darker-1
.red-bg .darker-2
.red-bg .darker-3
.red-bg .darker-4
.red-bg .alt-1
.red-bg .alt-2
.red-bg .alt-3
.red-bg .alt-4
<div id="graph1"></div>
.pink-bg .lighter-5
.pink-bg .lighter-4
.pink-bg .lighter-3
.pink-bg .lighter-2
.pink-bg .lighter-1
.pink-bg
.pink-bg .darker-1
.pink-bg .darker-2
.pink-bg .darker-3
.pink-bg .darker-4
.pink-bg .alt-1
.pink-bg .alt-2
.pink-bg .alt-3
.pink-bg .alt-4
<div id="graph1"></div>
.purple-bg .lighter-5
.purple-bg .lighter-4
.purple-bg .lighter-3
.purple-bg .lighter-2
.purple-bg .lighter-1
.purple-bg
.purple-bg .darker-1
.purple-bg .darker-2
.purple-bg .darker-3
.purple-bg .darker-4
.purple-bg .alt-1
.purple-bg .alt-2
.purple-bg .alt-3
.purple-bg .alt-4
<div id="graph1"></div>
.deep-purple-bg .lighter-5
.deep-purple-bg .lighter-4
.deep-purple-bg .lighter-3
.deep-purple-bg .lighter-2
.deep-purple-bg .lighter-1
.deep-purple-bg
.deep-purple-bg .darker-1
.deep-purple-bg .darker-2
.deep-purple-bg .darker-3
.deep-purple-bg .darker-4
.deep-purple-bg .alt-1
.deep-purple-bg .alt-2
.deep-purple-bg .alt-3
.deep-purple-bg .alt-4
<div id="graph1"></div>
.indigo-bg .lighter-5
.indigo-bg .lighter-4
.indigo-bg .lighter-3
.indigo-bg .lighter-2
.indigo-bg .lighter-1
.indigo-bg
.indigo-bg .darker-1
.indigo-bg .darker-2
.indigo-bg .darker-3
.indigo-bg .darker-4
.indigo-bg .alt-1
.indigo-bg .alt-2
.indigo-bg .alt-3
.indigo-bg .alt-4
<div id="graph1"></div>
.blue-bg .lighter-5
.blue-bg .lighter-4
.blue-bg .lighter-3
.blue-bg .lighter-2
.blue-bg .lighter-1
.blue-bg
.blue-bg .darker-1
.blue-bg .darker-2
.blue-bg .darker-3
.blue-bg .darker-4
.blue-bg .alt-1
.blue-bg .alt-2
.blue-bg .alt-3
.blue-bg .alt-4
<div id="graph1"></div>
.light-blue-bg .lighter-5
.light-blue-bg .lighter-4
.light-blue-bg .lighter-3
.light-blue-bg .lighter-2
.light-blue-bg .lighter-1
.light-blue-bg
.light-blue-bg .darker-1
.light-blue-bg .darker-2
.light-blue-bg .darker-3
.light-blue-bg .darker-4
.light-blue-bg .alt-1
.light-blue-bg .alt-2
.light-blue-bg .alt-3
.light-blue-bg .alt-4
<div id="graph1"></div>
.cyan-bg .lighter-5
.cyan-bg .lighter-4
.cyan-bg .lighter-3
.cyan-bg .lighter-2
.cyan-bg .lighter-1
.cyan-bg
.cyan-bg .darker-1
.cyan-bg .darker-2
.cyan-bg .darker-3
.cyan-bg .darker-4
.cyan-bg .alt-1
.cyan-bg .alt-2
.cyan-bg .alt-3
.cyan-bg .alt-4
<div id="graph1"></div>
.teal-bg .lighter-5
.teal-bg .lighter-4
.teal-bg .lighter-3
.teal-bg .lighter-2
.teal-bg .lighter-1
.teal-bg
.teal-bg .darker-1
.teal-bg .darker-2
.teal-bg .darker-3
.teal-bg .darker-4
.teal-bg .alt-1
.teal-bg .alt-2
.teal-bg .alt-3
.teal-bg .alt-4
<div id="graph1"></div>
.green-bg .lighter-5
.green-bg .lighter-4
.green-bg .lighter-3
.green-bg .lighter-2
.green-bg .lighter-1
.green-bg
.green-bg .darker-1
.green-bg .darker-2
.green-bg .darker-3
.green-bg .darker-4
.green-bg .alt-1
.green-bg .alt-2
.green-bg .alt-3
.green-bg .alt-4
<div id="graph1"></div>
.light-green-bg .lighter-5
.light-green-bg .lighter-4
.light-green-bg .lighter-3
.light-green-bg .lighter-2
.light-green-bg .lighter-1
.light-green-bg
.light-green-bg .darker-1
.light-green-bg .darker-2
.light-green-bg .darker-3
.light-green-bg .darker-4
.light-green-bg .alt-1
.light-green-bg .alt-2
.light-green-bg .alt-3
.light-green-bg .alt-4
<div id="graph1"></div>
.lime-bg .lighter-5
.lime-bg .lighter-4
.lime-bg .lighter-3
.lime-bg .lighter-2
.lime-bg .lighter-1
.lime-bg
.lime-bg .darker-1
.lime-bg .darker-2
.lime-bg .darker-3
.lime-bg .darker-4
.lime-bg .alt-1
.lime-bg .alt-2
.lime-bg .alt-3
.lime-bg .alt-4
<div id="graph1"></div>
.yellow-bg .lighter-5
.yellow-bg .lighter-4
.yellow-bg .lighter-3
.yellow-bg .lighter-2
.yellow-bg .lighter-1
.yellow-bg
.yellow-bg .darker-1
.yellow-bg .darker-2
.yellow-bg .darker-3
.yellow-bg .darker-4
.yellow-bg .alt-1
.yellow-bg .alt-2
.yellow-bg .alt-3
.yellow-bg .alt-4
<div id="graph1"></div>
.amber-bg .lighter-5
.amber-bg .lighter-4
.amber-bg .lighter-3
.amber-bg .lighter-2
.amber-bg .lighter-1
.amber-bg
.amber-bg .darker-1
.amber-bg .darker-2
.amber-bg .darker-3
.amber-bg .darker-4
.amber-bg .alt-1
.amber-bg .alt-2
.amber-bg .alt-3
.amber-bg .alt-4
<div id="graph1"></div>
.orange-bg .lighter-5
.orange-bg .lighter-4
.orange-bg .lighter-3
.orange-bg .lighter-2
.orange-bg .lighter-1
.orange-bg
.orange-bg .darker-1
.orange-bg .darker-2
.orange-bg .darker-3
.orange-bg .darker-4
.orange-bg .alt-1
.orange-bg .alt-2
.orange-bg .alt-3
.orange-bg .alt-4
<div id="graph1"></div>
.deep-orange-bg .lighter-5
.deep-orange-bg .lighter-4
.deep-orange-bg .lighter-3
.deep-orange-bg .lighter-2
.deep-orange-bg .lighter-1
.deep-orange-bg
.deep-orange-bg .darker-1
.deep-orange-bg .darker-2
.deep-orange-bg .darker-3
.deep-orange-bg .darker-4
.deep-orange-bg .alt-1
.deep-orange-bg .alt-2
.deep-orange-bg .alt-3
.deep-orange-bg .alt-4
<div id="graph1"></div>
.brown-bg .lighter-5
.brown-bg .lighter-4
.brown-bg .lighter-3
.brown-bg .lighter-2
.brown-bg .lighter-1
.brown-bg
.brown-bg .darker-1
.brown-bg .darker-2
.brown-bg .darker-3
.brown-bg .darker-4
<div id="graph1"></div>
.grey-bg .lighter-5
.grey-bg .lighter-4
.grey-bg .lighter-3
.grey-bg .lighter-2
.grey-bg .lighter-1
.grey-bg
.grey-bg .darker-1
.grey-bg .darker-2
.grey-bg .darker-3
.grey-bg .darker-4
<div id="graph1"></div>
.blue-grey-bg .lighter-5
.blue-grey-bg .lighter-4
.blue-grey-bg .lighter-3
.blue-grey-bg .lighter-2
.blue-grey-bg .lighter-1
.blue-grey-bg
.blue-grey-bg .darker-1
.blue-grey-bg .darker-2
.blue-grey-bg .darker-3
.blue-grey-bg .darker-4
<div id="graph1"></div>
.black-bg
.white-bg
.transparent-bg
<div id="graph1"></div>
Background alpha opacity
.bg-alpha-8 .bg-alpha-6 .bg-alpha-4 .bg-alpha-2
<div id="graph1"></div>