Background

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

On this page

Background color

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 background-color= color utilities .

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
vue
<template>
  <b-div
    padding="3"
    margin="b-2"
    background-color="primary"
    text-color="white"
  >
    .bg-primary
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="secondary"
    text-color="white"
  >
    .bg-secondary
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="success"
    text-color="white"
  >
    .bg-success
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="danger"
    text-color="white"
  >
    .bg-danger
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="warning"
    text-color="dark"
  >
    .bg-warning
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="info"
    text-color="dark"
  >
    .bg-info
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="light"
    text-color="dark"
  >
    .bg-light
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="dark"
    text-color="white"
  >
    .bg-dark
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="body"
    text-color="dark"
  >
    .bg-body
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="white"
    text-color="dark"
  >
    .bg-white
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="transparent"
    text-color="dark"
  >
    .bg-transparent
  </b-div>
</template>

Background gradient

By adding a background-gradient attribute, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.

.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
vue
<template>
  <b-div
    padding="3"
    margin="b-2"
    background-color="primary"
    text-color="white"
    background-gradient
  >
    .bg-primary.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="secondary"
    text-color="white"
    background-gradient
  >
    .bg-secondary.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="success"
    text-color="white"
    background-gradient
  >
    .bg-success.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="danger"
    text-color="white"
    background-gradient
  >
    .bg-danger.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="warning"
    text-color="dark"
    background-gradient
  >
    .bg-warning.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="info"
    text-color="dark"
    background-gradient
    class="p-3 mb-2 bg-info bg-gradient text-dark"
  >
    .bg-info.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="light"
    text-color="dark"
    background-gradient
  >
    .bg-light.bg-gradient
  </b-div>
  <b-div
    padding="3"
    margin="b-2"
    background-color="dark"
    text-color="white"
    background-gradient
  >
    .bg-dark.bg-gradient
  </b-div>
</template>

Opacity

Added in v5.1.0

As of v5.1.0, background-color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our default background-color="success" utility.

Example

To change that opacity, override --bs-bg-opacity via custom styles or inline styles.

This is default success background
This is 50% opacity success background
vue
<template>
  <b-div
    padding="2"
    background-color="success"
    text-color="white"
  >
    This is default success background
  </b-div>
  <b-div
    padding="2"
    background-color="success"
    style="--bs-bg-opacity: 0.5"
  >
    This is 50% opacity success background
  </b-div>
</template>

Or, choose from any of the background-opacity attribute:

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
vue
<template>
  <b-div
    padding="2"
    background-color="success"
    text-color="white"
  >
    This is default success background
  </b-div>
  <b-div
    padding="2"
    background-color="success"
    text-color="white"
    :background-opacity="75"
  >
    This is 75% opacity success background
  </b-div>
  <b-div
    padding="2"
    background-color="success"
    text-color="dark"
    :background-opacity="50"
  >
    This is 50% opacity success background
  </b-div>
  <b-div
    padding="2"
    background-color="success"
    text-color="dark"
    :background-opacity="25"
  >
    This is 25% opacity success background
  </b-div>
  <b-div
    padding="2"
    background-color="success"
    text-color="dark"
    :background-opacity="10"
  >
    This is 10% opacity success background
  </b-div>
</template>