Bootstrap 5 Background
Background
Convey meaning throughbackground-color and add decoration with gradients.
🤖 Looking for the LLM-optimized version?View llm.md
Background color
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilitiesdo not setcolor, so in some cases you’ll want to use.text-*color utilities.
.bg-body-secondary
.bg-body-tertiary
<divclass="p-3 mb-2 bg-primary text-white">.bg-primary</div><divclass="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div><divclass="p-3 mb-2 bg-secondary text-white">.bg-secondary</div><divclass="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div><divclass="p-3 mb-2 bg-success text-white">.bg-success</div><divclass="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div><divclass="p-3 mb-2 bg-danger text-white">.bg-danger</div><divclass="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div><divclass="p-3 mb-2 bg-warning text-dark">.bg-warning</div><divclass="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div><divclass="p-3 mb-2 bg-info text-dark">.bg-info</div><divclass="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div><divclass="p-3 mb-2 bg-light text-dark">.bg-light</div><divclass="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div><divclass="p-3 mb-2 bg-dark text-white">.bg-dark</div><divclass="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div><pclass="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p><pclass="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p><divclass="p-3 mb-2 bg-body text-body">.bg-body</div><divclass="p-3 mb-2 bg-black text-white">.bg-black</div><divclass="p-3 mb-2 bg-white text-dark">.bg-white</div><divclass="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 addbackground-image: var(gradient);.
Opacity
Added in v4.1.0As of v4.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{--cui-bg-opacity:1;background-color:rgba(var(--cui-success-rgb),var(--cui-bg-opacity))!important;}We use an RGB version of our--cui-success (with the value of25, 135, 84) CSS variable and attached a second CSS variable,--cui-bg-opacity, for the alpha transparency (with a default value1 thanks to a local CSS variable). That means anytime you use.bg-success now, your computedcolor value isrgba(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--cui-bg-opacity via custom styles or inline styles.
<divclass="bg-success p-2 text-white">This is default success background</div><divclass="bg-success p-2"style="--cui-bg-opacity: .5;">This is 50% opacity success background</div>Or, choose from any of the.bg-opacity utilities:
<divclass="bg-success p-2 text-white">This is default success background</div><divclass="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div><divclass="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div><divclass="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div><divclass="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Sass
In addition to the following Sass functionality, consider reading about our includedCSS custom properties (aka CSS variables) for colors and more.
Variables
Mostbackground-color utilities are generated by our theme colors, reassigned from our generic color palette variables.
$blue:#0d6efd;$indigo:#6610f2;$purple:#6f42c1;$pink:#d63384;$red:#dc3545;$orange:#fd7e14;$yellow:#ffc107;$green:#198754;$teal:#20c997;$cyan:#0dcaf0;$primary:#5856d6;$secondary:#6b7785;$success:#1b9e3e;$info:#39f;$warning:#f9b115;$danger:#e55353;$light:$gray-100;$dark:$gray-900;$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.
$white:#fff;$gray-base:#323a49;$gray-100:#f3f4f7;$gray-200:#e7eaee;$gray-300:#dbdfe6;$gray-400:#cfd4de;$gray-500:#aab3c5;$gray-600:#6d7d9c;$gray-700:#4a566d;$gray-800:#323a49;$gray-900:#212631;$black:#080a0c;Variables for settingbackground-color in.bg-*-subtle utilities in light and dark mode:
$primary-bg-subtle:#cfc7f3;$secondary-bg-subtle:#ced2d8;$success-bg-subtle:#cbedd6;$info-bg-subtle:#c0e6ff;$warning-bg-subtle:#feecc5;$danger-bg-subtle:#f9d4d4;$light-bg-subtle:color.mix($gray-100,$white);$dark-bg-subtle:$gray-400;Map
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");And 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,"$prefix","$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));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);}}// 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:$gray-700,$end-color:$gray-800,$start-percent:0%,$end-percent:100%){background-image:linear-gradient(toright,$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:$gray-700,$end-color:$gray-800,$start-percent:null,$end-percent:null){background-image:linear-gradient(tobottom,$start-color$start-percent,$end-color$end-percent);}@mixin gradient-directional($start-color:$gray-700,$end-color:$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(toright,$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:$gray-700,$outer-color:$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,$color25%,transparent25%,transparent50%,$color50%,$color75%,transparent75%,transparent);}Utilities API
Background utilities are declared in our utilities API inscss/_utilities.scss.Learn how to use the utilities API.
"background-color":(property:background-color,class:bg,dark-mode:true,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)),))),"bg-opacity":(css-var:true,class:bg-opacity,values:(10:.1,15:.15,25:.25,50:.5,75:.75,100:1)),"subtle-background-color":(property:background-color,class:bg,dark-mode:true,values:$utilities-bg-subtle),