Skip to main content
.bg-grey
.bg-grey-lighter
.bg-grey-lightest
.bg-dark
.bg-dark-lighter
.bg-dark-lightest
.bg-black
.bg-black-09
.bg-black-08
.bg-black-07
.bg-black-06
.bg-black-05
.bg-black-04
.bg-black-03
.bg-black-02
.bg-black-01
.bg-dark-grey
.bg-dark-grey-09
.bg-dark-grey-08
.bg-dark-grey-07
.bg-dark-grey-06
.bg-dark-grey-05
.bg-dark-grey-04
.bg-dark-grey-03
.bg-dark-grey-02
.bg-dark-grey-01

<div class="padding-10 bg-grey">.bg-grey</div>
<div class="padding-10 bg-grey-lighter">.bg-grey-lighter</div>
<div class="padding-10 bg-grey-lightest">.bg-grey-lightest</div>
<div class="padding-10 bg-dark">.bg-dark</div>
<div class="padding-10 bg-dark-lighter">.bg-dark-lighter</div>
<div class="padding-10 bg-dark-lightest">.bg-dark-lightest</div>
<div class="padding-10 bg-black">.bg-black</div>
<div class="padding-10 bg-black-09">.bg-black-09</div>
<div class="padding-10 bg-black-08">.bg-black-08</div>
<div class="padding-10 bg-black-07">.bg-black-07</div>
<div class="padding-10 bg-black-06">.bg-black-06</div>
<div class="padding-10 bg-black-05">.bg-black-05</div>
<div class="padding-10 bg-black-04">.bg-black-04</div>
<div class="padding-10 bg-black-03">.bg-black-03</div>
<div class="padding-10 bg-black-02">.bg-black-02</div>
<div class="padding-10 bg-black-01">.bg-black-01</div>
<div class="padding-10 bg-dark-grey">.bg-dark-grey</div>
<div class="padding-10 bg-dark-grey-09">.bg-dark-grey-09</div>
<div class="padding-10 bg-dark-grey-08">.bg-dark-grey-08</div>
<div class="padding-10 bg-dark-grey-07">.bg-dark-grey-07</div>
<div class="padding-10 bg-dark-grey-06">.bg-dark-grey-06</div>
<div class="padding-10 bg-dark-grey-05">.bg-dark-grey-05</div>
<div class="padding-10 bg-dark-grey-04">.bg-dark-grey-04</div>
<div class="padding-10 bg-dark-grey-03">.bg-dark-grey-03</div>
<div class="padding-10 bg-dark-grey-02">.bg-dark-grey-02</div>
<div class="padding-10 bg-dark-grey-01">.bg-dark-grey-01</div>

.bg-white
.bg-white-09
.bg-white-08
.bg-white-07
.bg-white-06
.bg-white-05
.bg-white-04
.bg-white-03
.bg-white-02
.bg-white-01
.bg-transparent

<div class="padding-10 bg-white text-black-07">.bg-white</div>
<div class="padding-10 bg-white-09 text-black-07">.bg-white-09</div>
<div class="padding-10 bg-white-08 text-black-07">.bg-white-08</div>
<div class="padding-10 bg-white-07 text-black-07">.bg-white-07</div>
<div class="padding-10 bg-white-06 text-black-07">.bg-white-06</div>
<div class="padding-10 bg-white-05 text-black-07">.bg-white-05</div>
<div class="padding-10 bg-white-04 text-black-07">.bg-white-04</div>
<div class="padding-10 bg-white-03 text-white-05">.bg-white-03</div>
<div class="padding-10 bg-white-02 text-white-05">.bg-white-02</div>
<div class="padding-10 bg-white-01 text-white-05">.bg-white-01</div>
<div class="padding-10 bg-transparent text-white-05">.bg-white-01</div>

Bootstrap Backgrounds

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

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