Background
Convey meaning through background-color and add decoration with gradients.
Solid Color
For backgrounds, use .bg-* with any color from a predefined set of 270+ colors. Choose from 22 base colors with respective light & dark shades. See full list of colors here.
<div class="bg-success"></div>
<div class="bg-red"></div>
<div class="bg-danger"></div>
<div class="bg-info"></div>
<div class="bg-warning"></div>
| Class | Values |
|---|---|
class="bg-[Value]" |
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Dark Color
For Dark backgrounds, use .bg-dark-*
<div class="bg-dark-10 h-70p"></div>
<div class="bg-dark-20 h-70p"></div>
<div class="bg-dark-40 h-70p"></div>
<div class="bg-dark-60 h-70p"></div>
<div class="bg-dark-80 h-70p"></div>
<div class="bg-dark-100 h-70p"></div>
| Class | Values |
|---|---|
class="bg-dark-[Value]" |
10 / 20 / 40 / 60 / 80 / 100 |
Grey Color
For Dark backgrounds, use .bg-grey-*
<div class="bg-grey-light-5 h-70p"></div>
<div class="bg-grey-light-4 h-70p"></div>
<div class="bg-grey-light-3 h-70p"></div>
<div class="bg-grey-light-2 h-70p"></div>
<div class="bg-grey-light-1 h-70p"></div>
<div class="bg-grey h-70p"></div>
<div class="bg-grey-dark-1 h-70p"></div>
<div class="bg-grey-dark-2 h-70p"></div>
<div class="bg-grey-dark-3 h-70p"></div>
<div class="bg-grey-dark-4 h-70p"></div>
<div class="bg-grey-dark-5 h-70p"></div>
| Class | Values |
|---|---|
class="bg-grey-light-[Value]"class="bg-grey-dark-[Value]" |
1 / 2 / 3 / 4 / 5 |
Background Opacity
A set of dark & light background is made with different transparencies.
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
| Class | Values |
|---|---|
class="bg-opacity-[Value]" |
10 / 25/ 50 / 75 |
Overlay
Use .bg-overlay .bg-success .bg-opacity-*.
<div class="overlay-wrap">
<img class="d-block w-100 img-fluid" src="dist/img/trans-bg.jpg" alt="img" />
<div class="bg-overlay bg-success bg-opacity-25"></div>
</div>