Background

Class	Styles
.bg-primary	--bs-bg: var(--bs-blue-500); background-color: var(--bs-bg);
.bg-accent	--bs-bg: var(--bs-indigo-500); background-color: var(--bs-bg);
.bg-success	--bs-bg: var(--bs-green-500); background-color: var(--bs-bg);
.bg-danger	--bs-bg: var(--bs-red-500); background-color: var(--bs-bg);
.bg-warning	--bs-bg: var(--bs-yellow-500); background-color: var(--bs-bg);
.bg-info	--bs-bg: var(--bs-cyan-500); background-color: var(--bs-bg);
.bg-inverse	--bs-bg: light-dark(var(--bs-gray-900), var(--bs-gray-025)); background-color: var(--bs-bg);
.bg-secondary	--bs-bg: light-dark(var(--bs-gray-100), var(--bs-gray-600)); background-color: var(--bs-bg);
.bg-body	--bs-bg: light-dark(var(--bs-white), var(--bs-gray-975)); background-color: var(--bs-bg);
.bg-1	--bs-bg: light-dark(var(--bs-gray-025), var(--bs-gray-950)); background-color: var(--bs-bg);
.bg-2	--bs-bg: light-dark(var(--bs-gray-050), var(--bs-gray-900)); background-color: var(--bs-bg);
.bg-3	--bs-bg: light-dark(var(--bs-gray-100), var(--bs-gray-800)); background-color: var(--bs-bg);
.bg-4	--bs-bg: light-dark(var(--bs-gray-200), var(--bs-gray-700)); background-color: var(--bs-bg);
.bg-white	--bs-bg: var(--bs-white); background-color: var(--bs-bg);
.bg-black	--bs-bg: var(--bs-black); background-color: var(--bs-bg);
.bg-transparent	--bs-bg: transparent; background-color: var(--bs-bg);
.bg-inherit	--bs-bg: inherit; background-color: var(--bs-bg);
.bg-muted-primary	--bs-bg: light-dark(var(--bs-blue-200), var(--bs-blue-800)); background-color: var(--bs-bg);
.bg-muted-accent	--bs-bg: light-dark(var(--bs-indigo-200), var(--bs-indigo-800)); background-color: var(--bs-bg);
.bg-muted-success	--bs-bg: light-dark(var(--bs-green-200), var(--bs-green-800)); background-color: var(--bs-bg);
.bg-muted-danger	--bs-bg: light-dark(var(--bs-red-200), var(--bs-red-800)); background-color: var(--bs-bg);
.bg-muted-warning	--bs-bg: light-dark(var(--bs-yellow-200), var(--bs-yellow-800)); background-color: var(--bs-bg);
.bg-muted-info	--bs-bg: light-dark(var(--bs-cyan-200), var(--bs-cyan-800)); background-color: var(--bs-bg);
.bg-muted-inverse	--bs-bg: light-dark(var(--bs-gray-200), var(--bs-gray-300)); background-color: var(--bs-bg);
.bg-muted-secondary	--bs-bg: light-dark(var(--bs-gray-100), var(--bs-gray-700)); background-color: var(--bs-bg);
.bg-subtle-primary	--bs-bg: light-dark(var(--bs-blue-100), var(--bs-blue-900)); background-color: var(--bs-bg);
.bg-subtle-accent	--bs-bg: light-dark(var(--bs-indigo-100), var(--bs-indigo-900)); background-color: var(--bs-bg);
.bg-subtle-success	--bs-bg: light-dark(var(--bs-green-100), var(--bs-green-900)); background-color: var(--bs-bg);
.bg-subtle-danger	--bs-bg: light-dark(var(--bs-red-100), var(--bs-red-900)); background-color: var(--bs-bg);
.bg-subtle-warning	--bs-bg: light-dark(var(--bs-yellow-100), var(--bs-yellow-900)); background-color: var(--bs-bg);
.bg-subtle-info	--bs-bg: light-dark(var(--bs-cyan-100), var(--bs-cyan-900)); background-color: var(--bs-bg);
.bg-subtle-inverse	--bs-bg: light-dark(var(--bs-gray-100), var(--bs-gray-900)); background-color: var(--bs-bg);
.bg-subtle-secondary	--bs-bg: light-dark(var(--bs-gray-050), var(--bs-gray-800)); background-color: var(--bs-bg);
.bg-10	background-color: color-mix(in oklch, var(--bs-bg) 10%, transparent);
.bg-20	background-color: color-mix(in oklch, var(--bs-bg) 20%, transparent);
.bg-30	background-color: color-mix(in oklch, var(--bs-bg) 30%, transparent);
.bg-40	background-color: color-mix(in oklch, var(--bs-bg) 40%, transparent);
.bg-50	background-color: color-mix(in oklch, var(--bs-bg) 50%, transparent);
.bg-60	background-color: color-mix(in oklch, var(--bs-bg) 60%, transparent);
.bg-70	background-color: color-mix(in oklch, var(--bs-bg) 70%, transparent);
.bg-80	background-color: color-mix(in oklch, var(--bs-bg) 80%, transparent);
.bg-90	background-color: color-mix(in oklch, var(--bs-bg) 90%, transparent);
.bg-100	background-color: var(--bs-bg);
.bg-gradient	background-image: var(--bs-gradient);

Accessibility Tip: Using color to convey meaning

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Colors

Change the background-color using utilities built on our theme colors using .bg-{color}, .bg-muted-{color}, and .bg-subtle-{color}. All these background color utilities set the background-color property to a local CSS variable, --bs-bg, which has the value of the theme color. Most color values also use light-dark() to ensure sufficient contrast in both light and dark color modes.

For example, .bg-primary sets the --bs-bg variable to var(--bs-primary-500):

CSS

.bg-primary {
  --bs-bg: var(--bs-primary-500);
  background-color: var(--bs-bg);
}

This approach allows us to also easily support translucency with our .bg-{opacity} utilities as we can use color-mix() with the CSS variable to generate the appropriate color. See the opacity section for more details.

.bg-primary

.bg-muted-primary

.bg-subtle-primary

.bg-accent

.bg-muted-accent

.bg-subtle-accent

.bg-success

.bg-muted-success

.bg-subtle-success

.bg-danger

.bg-muted-danger

.bg-subtle-danger

.bg-warning

.bg-muted-warning

.bg-subtle-warning

.bg-info

.bg-muted-info

.bg-subtle-info

.bg-inverse

.bg-muted-inverse

.bg-subtle-inverse

.bg-secondary

.bg-muted-secondary

.bg-subtle-secondary

.bg-body

.bg-1

.bg-2

.bg-3

.bg-4

.bg-black

.bg-white

.bg-transparent

HTML

<div class="p-3 mb-2 bg-primary color-on-primary">.bg-primary</div>
<div class="p-3 mb-2 bg-muted-primary color-primary">.bg-muted-primary</div>
<div class="p-3 mb-2 bg-subtle-primary color-primary">.bg-subtle-primary</div>
<div class="p-3 mb-2 bg-accent color-on-accent">.bg-accent</div>
<div class="p-3 mb-2 bg-muted-accent color-accent">.bg-muted-accent</div>
<div class="p-3 mb-2 bg-subtle-accent color-accent">.bg-subtle-accent</div>
<div class="p-3 mb-2 bg-success color-on-success">.bg-success</div>
<div class="p-3 mb-2 bg-muted-success color-success">.bg-muted-success</div>
<div class="p-3 mb-2 bg-subtle-success color-success">.bg-subtle-success</div>
<div class="p-3 mb-2 bg-danger color-on-danger">.bg-danger</div>
<div class="p-3 mb-2 bg-muted-danger color-danger">.bg-muted-danger</div>
<div class="p-3 mb-2 bg-subtle-danger color-danger">.bg-subtle-danger</div>
<div class="p-3 mb-2 bg-warning color-on-warning">.bg-warning</div>
<div class="p-3 mb-2 bg-muted-warning color-warning">.bg-muted-warning</div>
<div class="p-3 mb-2 bg-subtle-warning color-warning">.bg-subtle-warning</div>
<div class="p-3 mb-2 bg-info color-on-info">.bg-info</div>
<div class="p-3 mb-2 bg-muted-info color-info">.bg-muted-info</div>
<div class="p-3 mb-2 bg-subtle-info color-info">.bg-subtle-info</div>
<div class="p-3 mb-2 bg-inverse color-on-inverse">.bg-inverse</div>
<div class="p-3 mb-2 bg-muted-inverse color-inverse">.bg-muted-inverse</div>
<div class="p-3 mb-2 bg-subtle-inverse color-inverse">.bg-subtle-inverse</div>
<div class="p-3 mb-2 bg-secondary color-on-secondary">.bg-secondary</div>
<div class="p-3 mb-2 bg-muted-secondary color-secondary">.bg-muted-secondary</div>
<div class="p-3 mb-2 bg-subtle-secondary color-secondary">.bg-subtle-secondary</div>
<div class="p-3 mb-2 bg-body fg-body">.bg-body</div>
<div class="p-3 mb-2 bg-1">.bg-1</div>
<div class="p-3 mb-2 bg-2">.bg-2</div>
<div class="p-3 mb-2 bg-3">.bg-3</div>
<div class="p-3 mb-2 bg-4">.bg-4</div>
<div class="p-3 mb-2 bg-black fg-white">.bg-black</div>
<div class="p-3 mb-2 bg-white fg-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent fg-body">.bg-transparent</div>

Background gradient

By adding a .bg-gradient class, 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-accent.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-inverse.bg-gradient

.bg-secondary.bg-gradient

.bg-black.bg-gradient

HTML

<div class="p-3 bg-primary bg-gradient fg-contrast-primary">.bg-primary.bg-gradient</div>
<div class="p-3 bg-accent bg-gradient fg-contrast-accent">.bg-accent.bg-gradient</div>
<div class="p-3 bg-success bg-gradient fg-contrast-success">.bg-success.bg-gradient</div>
<div class="p-3 bg-danger bg-gradient fg-contrast-danger">.bg-danger.bg-gradient</div>
<div class="p-3 bg-warning bg-gradient fg-contrast-warning">.bg-warning.bg-gradient</div>
<div class="p-3 bg-info bg-gradient fg-contrast-info">.bg-info.bg-gradient</div>
<div class="p-3 bg-inverse bg-gradient fg-contrast-inverse">.bg-inverse.bg-gradient</div>
<div class="p-3 bg-secondary bg-gradient fg-contrast-secondary">.bg-secondary.bg-gradient</div>
<div class="p-3 bg-black bg-gradient fg-contrast">.bg-black.bg-gradient</div>

Opacity

Change the opacity of a background color by using any of the .bg-<percentage> utilities which use color-mix() to mix the background color with transparent.

This is default success background

This is 90% opacity success background

This is 80% opacity success background

This is 70% opacity success background

This is 60% opacity success background

This is 50% opacity success background

This is 40% opacity success background

This is 30% opacity success background

This is 20% opacity success background

This is 10% opacity success background

HTML

<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-90">This is 90% opacity success background</div>
<div class="bg-success p-2 text-white bg-80">This is 80% opacity success background</div>
<div class="bg-success p-2 text-white bg-70">This is 70% opacity success background</div>
<div class="bg-success p-2 text-white bg-60">This is 60% opacity success background</div>
<div class="bg-success p-2 text-dark bg-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-40">This is 40% opacity success background</div>
<div class="bg-success p-2 text-dark bg-30">This is 30% opacity success background</div>
<div class="bg-success p-2 text-dark bg-20">This is 20% opacity success background</div>
<div class="bg-success p-2 text-dark bg-10">This is 10% opacity success background</div>

CSS

In addition to the following Sass functionality, consider reading about our included CSS custom properties (aka CSS variables) for colors and more.

Sass variables

Most background-color utilities are generated by our theme colors, reassigned from our generic color palette variables.

SCSS

// $primary:       $blue-500;
// $secondary:     var(--gray-600);
// $success:       $green-500;
// $info:          $cyan-500;
// $warning:       $yellow-500;
// $danger:        $red-500;
// $light:         var(--gray-100);
// $dark:          var(--gray-900);

SCSS

$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));

Grayscale colors are also available, but only a subset are used to generate any utilities.

Variables for setting background-color in .bg-*-subtle utilities in light and dark mode:

Sass maps

Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.

SCSS

// $theme-colors: (
//   "primary":    $primary,
//   "secondary":  $secondary,
//   "success":    $success,
//   "info":       $info,
//   "warning":    $warning,
//   "danger":     $danger,
//   "light":      $light,
//   "dark":       $dark
// );

Grayscale colors are also available as a Sass map. This map is not used to generate any utilities.

Sass mixins

No mixins are used to generate our background utilities, but we do have some additional mixins for other situations where you’d like to create your own gradients.

SCSS

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--gradient);
  }
}

SCSS

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: var(--gray-700), $end-color: var(--gray-800), $start-percent: null, $end-percent: null) {
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}

@mixin gradient-directional($start-color: var(--gray-700), $end-color: var(--gray-800), $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
}

@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-radial($inner-color: var(--gray-700), $outer-color: var(--gray-800)) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
}

@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

Sass utilities API

Background utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS

"bg-color": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg,
  values: map.merge(theme-color-values("bg"), $theme-bgs),
),
"bg-color-subtle": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg-subtle,
  values: theme-color-values("bg-subtle"),
),
"bg-color-muted": (
  property: (
    "--bg": null,
    "background-color": var(--bg)
  ),
  class: bg-muted,
  values: theme-color-values("bg-muted"),
),
"bg-opacity": (
  class: bg,
  property: background-color,
  values: theme-opacity-values(--bg)
),