Background
Convey meaning through background-color and add decoration with gradients.
.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 set color to ensure contrasts.
.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.
<div class="p-3 mb-2 fw-bold bg-primary">.bg-primary</div>
<div class="p-3 mb-2 fw-bold bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 fw-bold bg-supporting-green">.bg-supporting-green</div>
<div class="p-3 mb-2 fw-bold bg-supporting-purple">.bg-supporting-purple</div>
<div class="p-3 mb-2 fw-bold bg-supporting-yellow">.bg-supporting-yellow</div>
<div class="p-3 mb-2 fw-bold bg-supporting-blue">.bg-supporting-blue</div>
<div class="p-3 mb-2 fw-bold bg-supporting-pink">.bg-supporting-pink</div>
<div class="p-3 mb-2 fw-bold bg-light">.bg-light</div>
<div class="p-3 mb-2 fw-bold bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 fw-bold bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 fw-bold bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 fw-bold bg-body">.bg-body</div>
<div class="p-3 mb-2 fw-bold bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 fw-bold bg-white">.bg-white</div>
<div class="p-3 mb-2 fw-bold bg-transparent">.bg-transparent</div>For each .background-* there is a matching .background-*-subtle utility. In Boosted, they have exactly the same value so we decided not to display them in the example above so that you don’t hesitate on which class to use.
Here is a list of these extra classes:
.bg-primary-subtle.bg-secondary-subtle.bg-success-subtle.bg-danger-subtle.bg-warning-subtle.bg-info-subtle.bg-light-subtle.bg-dark-subtle
Color naming
Since Orange brand distinguishes functional colors from supporting colors and Bootstrap doesn’t, naming can be somewhat inconsistent.
Bootstrap’s background-color utilities are supported in Boosted, but will result in our core .bg-supporting-* utilities—making .bg-danger inconsistent with .btn-danger color, for example.
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.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
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.
<div class="bg-success p-2 text-dark">This is default success background</div>
<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:
<div class="bg-success p-2 text-dark">This is default success background</div>
<div class="bg-success p-2 text-dark 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>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.
Boosted supersedes Bootstrap color variables with Orange brand color.
// Boosted mod
//// Core colors
$accessible-orange: #f16e00;
$brand-orange: #ff7900;
//// Functional colors
$functional-green: #32c832;
$functional-blue: #527edb;
$functional-yellow: #fc0;
$functional-red: #cd3c14;
//// Supporting colors
$supporting-blue: #4bb4e6;
$supporting-yellow: #ffd200;
$supporting-green: #50be87;
$supporting-purple: #a885d8;
$supporting-pink: #ffb4e6;
$blue: $functional-blue;
$indigo: $supporting-purple;
$purple: $supporting-purple;
$pink: $supporting-pink;
$red: $functional-red;
$orange: $brand-orange;
$yellow: $functional-yellow;
$green: $functional-green;
$teal: $supporting-green;
$cyan: $supporting-blue;
$primary: $orange;
$secondary: $black;
$success: $green;
$info: $blue;
$warning: $yellow;
$danger: $red;
$light: $gray-500;
$dark: $black;
Grayscale colors are also available, but only a subset are used to generate any utilities.
$white: #fff;
$gray-100: #fafafa;
$gray-200: #f6f6f6;
$gray-300: #eee;
$gray-400: #ddd;
$gray-500: #ccc;
$gray-600: #999;
$gray-700: #666;
$gray-800: #595959;
$gray-900: #333;
$black: #000;
Variables for setting background-color in .bg-*-subtle utilities in light and dark mode:
$primary-bg-subtle: $primary; // Boosted mod: instead of `tint-color($primary, 80%)`
$secondary-bg-subtle: $secondary; // Boosted mod: instead of `tint-color($secondary, 80%)`
$success-bg-subtle: $success; // Boosted mod: instead of `tint-color($success, 80%)`
$info-bg-subtle: $info; // Boosted mod: instead of `tint-color($info, 80%)`
$warning-bg-subtle: $warning; // Boosted mod: instead of `tint-color($warning, 80%)`
$danger-bg-subtle: $danger; // Boosted mod: instead of `tint-color($danger, 80%)`
$light-bg-subtle: $light; // Boosted mod: instead of `mix($gray-100, $white)`
$dark-bg-subtle: $dark; // Boosted mod: instead of `$gray-400`
$primary-bg-subtle-dark: $primary; // Boosted mod: instead of `shade-color($primary, 80%)`
$secondary-bg-subtle-dark: $secondary; // Boosted mod: instead of `shade-color($secondary, 80%)`
$success-bg-subtle-dark: $success; // Boosted mod: instead of `shade-color($success, 80%)`
$info-bg-subtle-dark: $info; // Boosted mod: instead of `shade-color($info, 80%)`
$warning-bg-subtle-dark: $warning; // Boosted mod: instead of `shade-color($warning, 80%)`
$danger-bg-subtle-dark: $danger; // Boosted mod: instead of `shade-color($danger, 80%)`
$light-bg-subtle-dark: $light; // Boosted mod: instead of `$gray-800`
$dark-bg-subtle-dark: $dark; // Boosted mod: instead of `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.
$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.
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
);
RGB colors are generated from a separate Sass map:
$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:
$utilities-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
"success-subtle": var(--#{$prefix}success-bg-subtle),
"info-subtle": var(--#{$prefix}info-bg-subtle),
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
"light-subtle": var(--#{$prefix}light-bg-subtle),
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
);
Color mode background colors are also available as a Sass map:
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"success": $success-bg-subtle,
"info": $info-bg-subtle,
"warning": $warning-bg-subtle,
"danger": $danger-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
);
$theme-colors-bg-subtle-dark: (
"primary": $primary-bg-subtle-dark,
"secondary": $secondary-bg-subtle-dark,
"success": $success-bg-subtle-dark,
"info": $info-bg-subtle-dark,
"warning": $warning-bg-subtle-dark,
"danger": $danger-bg-subtle-dark,
"light": $light-bg-subtle-dark,
"dark": $dark-bg-subtle-dark,
);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.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$prefix}gradient);
}
}
Sass utilities API
Background utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
"supporting-green": $supporting-green, // Boosted mod
"supporting-blue": $supporting-blue, // Boosted mod
"supporting-yellow": $supporting-yellow, // Boosted mod
"supporting-pink": $supporting-pink, // Boosted mod
"supporting-purple": $supporting-purple // Boosted mod
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
),