Background

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

Accessibility tip: 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.

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 .text-* color utilities.

Background utilities like .bg-* that generated from our original $theme-colors Sass map don’t yet respond to color modes, however, any .bg-*-subtle utility will. This will be resolved in v6.

Background - 图1

html

  1. <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
  2. <div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
  3. <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
  4. <div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
  5. <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
  6. <div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
  7. <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
  8. <div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
  9. <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
  10. <div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
  11. <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
  12. <div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div>
  13. <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
  14. <div class="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div>
  15. <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
  16. <div class="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div>
  17. <div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
  18. <div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
  19. <div class="p-3 mb-2 bg-body text-body">.bg-body</div>
  20. <div class="p-3 mb-2 bg-black text-white">.bg-black</div>
  21. <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
  22. <div class="p-3 mb-2 bg-transparent text-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-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

.bg-black.bg-gradient

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 .bg-success utility.

  1. .bg-success {
  2.   --bs-bg-opacity: 1;
  3.   background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
  4. }

We use an RGB version of our --bs-success (with the value of 25, 135, 84) CSS variable and attached a second CSS variable, --bs-bg-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable). That means anytime you use .bg-success now, your computed color value is rgba(25, 135, 84, 1). The local CSS variable inside each .bg-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.

Example

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

Background - 图2

html

  1. <div class="bg-success p-2 text-white">This is default success background</div>
  2. <div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>

Or, choose from any of the .bg-opacity utilities:

Background - 图3

html

  1. <div class="bg-success p-2 text-white">This is default success background</div>
  2. <div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
  3. <div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
  4. <div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
  5. <div class="bg-success p-2 text-dark bg-opacity-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/_variables.scss

  1. $blue:    #0d6efd;
  2. $indigo:  #6610f2;
  3. $purple:  #6f42c1;
  4. $pink:    #d63384;
  5. $red:     #dc3545;
  6. $orange:  #fd7e14;
  7. $yellow:  #ffc107;
  8. $green:   #198754;
  9. $teal:    #20c997;
  10. $cyan:    #0dcaf0;

scss/_variables.scss

  1. $primary:       $blue;
  2. $secondary:     $gray-600;
  3. $success:       $green;
  4. $info:          $cyan;
  5. $warning:       $yellow;
  6. $danger:        $red;
  7. $light:         $gray-100;
  8. $dark:          $gray-900;

scss/_variables.scss

  1. $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.

scss/_variables.scss

  1. $white:    #fff;
  2. $gray-100: #f8f9fa;
  3. $gray-200: #e9ecef;
  4. $gray-300: #dee2e6;
  5. $gray-400: #ced4da;
  6. $gray-500: #adb5bd;
  7. $gray-600: #6c757d;
  8. $gray-700: #495057;
  9. $gray-800: #343a40;
  10. $gray-900: #212529;
  11. $black:    #000;

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

scss/_variables.scss

  1. $primary-bg-subtle:       tint-color($primary, 80%);
  2. $secondary-bg-subtle:     tint-color($secondary, 80%);
  3. $success-bg-subtle:       tint-color($success, 80%);
  4. $info-bg-subtle:          tint-color($info, 80%);
  5. $warning-bg-subtle:       tint-color($warning, 80%);
  6. $danger-bg-subtle:        tint-color($danger, 80%);
  7. $light-bg-subtle:         mix($gray-100, $white);
  8. $dark-bg-subtle:          $gray-400;

scss/_variables-dark.scss

  1. $primary-bg-subtle-dark:            shade-color($primary, 80%);
  2. $secondary-bg-subtle-dark:          shade-color($secondary, 80%);
  3. $success-bg-subtle-dark:            shade-color($success, 80%);
  4. $info-bg-subtle-dark:               shade-color($info, 80%);
  5. $warning-bg-subtle-dark:            shade-color($warning, 80%);
  6. $danger-bg-subtle-dark:             shade-color($danger, 80%);
  7. $light-bg-subtle-dark:              $gray-800;
  8. $dark-bg-subtle-dark:               mix($gray-800, $black);

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/_variables.scss

  1. $theme-colors: (
  2.   "primary":    $primary,
  3.   "secondary":  $secondary,
  4.   "success":    $success,
  5.   "info":       $info,
  6.   "warning":    $warning,
  7.   "danger":     $danger,
  8.   "light":      $light,
  9.   "dark":       $dark
  10. );

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

scss/_variables.scss

  1. $grays: (
  2.   "100": $gray-100,
  3.   "200": $gray-200,
  4.   "300": $gray-300,
  5.   "400": $gray-400,
  6.   "500": $gray-500,
  7.   "600": $gray-600,
  8.   "700": $gray-700,
  9.   "800": $gray-800,
  10.   "900": $gray-900
  11. );

RGB colors are generated from a separate Sass map:

scss/_maps.scss

  1. $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Background color opacities build on that with their own map that’s consumed by the utilities API:

scss/_maps.scss

  1. $utilities-bg: map-merge(
  2.   $utilities-colors,
  3.   (
  4.     "black": to-rgb($black),
  5.     "white": to-rgb($white),
  6.     "body": to-rgb($body-bg)
  7.   )
  8. );
  9. $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
  11. $utilities-bg-subtle: (
  12.   "primary-subtle": var(--#{$prefix}primary-bg-subtle),
  13.   "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
  14.   "success-subtle": var(--#{$prefix}success-bg-subtle),
  15.   "info-subtle": var(--#{$prefix}info-bg-subtle),
  16.   "warning-subtle": var(--#{$prefix}warning-bg-subtle),
  17.   "danger-subtle": var(--#{$prefix}danger-bg-subtle),
  18.   "light-subtle": var(--#{$prefix}light-bg-subtle),
  19.   "dark-subtle": var(--#{$prefix}dark-bg-subtle)
  20. );

Color mode background colors are also available as a Sass map:

scss/_maps.scss

  1. $theme-colors-bg-subtle: (
  2.   "primary": $primary-bg-subtle,
  3.   "secondary": $secondary-bg-subtle,
  4.   "success": $success-bg-subtle,
  5.   "info": $info-bg-subtle,
  6.   "warning": $warning-bg-subtle,
  7.   "danger": $danger-bg-subtle,
  8.   "light": $light-bg-subtle,
  9.   "dark": $dark-bg-subtle,
  10. );

scss/_maps.scss

  1. $theme-colors-bg-subtle-dark: (
  2.   "primary": $primary-bg-subtle-dark,
  3.   "secondary": $secondary-bg-subtle-dark,
  4.   "success": $success-bg-subtle-dark,
  5.   "info": $info-bg-subtle-dark,
  6.   "warning": $warning-bg-subtle-dark,
  7.   "danger": $danger-bg-subtle-dark,
  8.   "light": $light-bg-subtle-dark,
  9.   "dark": $dark-bg-subtle-dark,
  10. );

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/mixins/_gradients.scss

  1. @mixin gradient-bg($color: null) {
  2.   background-color: $color;
  4.   @if $enable-gradients {
  5.     background-image: var(--#{$prefix}gradient);
  6.   }
  7. }

scss/mixins/_gradients.scss

  1. // Horizontal gradient, from left to right
  2. //
  3. // Creates two color stops, start and end, by specifying a color and position for each color stop.
  4. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
  5.   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
  6. }
  8. // Vertical gradient, from top to bottom
  9. //
  10. // Creates two color stops, start and end, by specifying a color and position for each color stop.
  11. @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
  12.   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
  13. }
  15. @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
  16.   background-image: linear-gradient($deg, $start-color, $end-color);
  17. }
  19. @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  20.   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  21. }
  23. @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  24.   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  25. }
  27. @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
  28.   background-image: radial-gradient(circle, $inner-color, $outer-color);
  29. }
  31. @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
  32.   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  33. }

Sass utilities API

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

scss/_utilities.scss

  1. "background-color": (
  2.   property: background-color,
  3.   class: bg,
  4.   local-vars: (
  5.     "bg-opacity": 1
  6.   ),
  7.   values: map-merge(
  8.     $utilities-bg-colors,
  9.     (
  10.       "transparent": transparent,
  11.       "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
  12.       "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
  13.     )
  14.   )
  15. ),
  16. "bg-opacity": (
  17.   css-var: true,
  18.   class: bg-opacity,
  19.   values: (
  20.     10: .1,
  21.     25: .25,
  22.     50: .5,
  23.     75: .75,
  24.     100: 1
  25.   )
  26. ),
  27. "subtle-background-color": (
  28.   property: background-color,
  29.   class: bg,
  30.   values: $utilities-bg-subtle
  31. ),