Background

Convey meaning through background-color and add decoration with gradients.

Example

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.

  • .bg-primary
  • .bg-secondary
  • .bg-success
  • .bg-danger
  • .bg-warning
  • .bg-info
  • .bg-light
  • .bg-dark
  • .bg-body
  • .bg-white
  • .bg-transparent
HTML
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

Background gradient

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds.

  • .bg-primary.bg-gradient
  • .bg-secondary.bg-gradient
  • .bg-success.bg-gradient
  • .bg-danger.bg-gradient
  • .bg-warning.bg-gradient
  • .bg-info.bg-gradient
  • .bg-light.bg-gradient
  • .bg-dark.bg-gradient
HTML
<div class="p-3 mb-2 bg-primary text-white bg-gradient">.bg-primary.bg-gradient</div>

Opacity

Use .bg-opacity-{value} utilities

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
HTML
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
Recent Notification