Convey meaning through background color with a handful of color utility classes. Includes support for lighten, darken and opacity together with dynamic background color on various triggers
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.
Extended palette is enabled by default. You can disable it by setting $enable-extended-color-palette variable to false. Here’s how the complete background color palette looks:
Because background colors uses hsla(), it’s easy to make them lighter or darker. Just use .bg-<variant>-<value> class on .bg-*. Default shading levels are 5. You can change them in $shading-levels variable.
Where <variant> is:
lighten for classes that lighten the background color
darken for classes that darken the background color
And <value> can be <xs|sm|md|lg|xl>.
Theme colors
.bg-primary .bg-lighten-xl
.bg-primary .bg-lighten-lg
.bg-primary .bg-lighten-md
.bg-primary .bg-lighten-sm
.bg-primary .bg-lighten-xs
.bg-primary
.bg-primary .bg-darken-xs
.bg-primary .bg-darken-sm
.bg-primary .bg-darken-md
.bg-primary .bg-darken-lg
.bg-primary .bg-darken-xl
.bg-secondary .bg-lighten-xl
.bg-secondary .bg-lighten-lg
.bg-secondary .bg-lighten-md
.bg-secondary .bg-lighten-sm
.bg-secondary .bg-lighten-xs
.bg-secondary
.bg-secondary .bg-darken-xs
.bg-secondary .bg-darken-sm
.bg-secondary .bg-darken-md
.bg-secondary .bg-darken-lg
.bg-secondary .bg-darken-xl
.bg-success .bg-lighten-xl
.bg-success .bg-lighten-lg
.bg-success .bg-lighten-md
.bg-success .bg-lighten-sm
.bg-success .bg-lighten-xs
.bg-success
.bg-success .bg-darken-xs
.bg-success .bg-darken-sm
.bg-success .bg-darken-md
.bg-success .bg-darken-lg
.bg-success .bg-darken-xl
.bg-info .bg-lighten-xl
.bg-info .bg-lighten-lg
.bg-info .bg-lighten-md
.bg-info .bg-lighten-sm
.bg-info .bg-lighten-xs
.bg-info
.bg-info .bg-darken-xs
.bg-info .bg-darken-sm
.bg-info .bg-darken-md
.bg-info .bg-darken-lg
.bg-info .bg-darken-xl
.bg-warning .bg-lighten-xl
.bg-warning .bg-lighten-lg
.bg-warning .bg-lighten-md
.bg-warning .bg-lighten-sm
.bg-warning .bg-lighten-xs
.bg-warning
.bg-warning .bg-darken-xs
.bg-warning .bg-darken-sm
.bg-warning .bg-darken-md
.bg-warning .bg-darken-lg
.bg-warning .bg-darken-xl
.bg-danger .bg-lighten-xl
.bg-danger .bg-lighten-lg
.bg-danger .bg-lighten-md
.bg-danger .bg-lighten-sm
.bg-danger .bg-lighten-xs
.bg-danger
.bg-danger .bg-darken-xs
.bg-danger .bg-darken-sm
.bg-danger .bg-darken-md
.bg-danger .bg-darken-lg
.bg-danger .bg-darken-xl
.bg-light .bg-lighten-xl
.bg-light .bg-lighten-lg
.bg-light .bg-lighten-md
.bg-light .bg-lighten-sm
.bg-light .bg-lighten-xs
.bg-light
.bg-light .bg-darken-xs
.bg-light .bg-darken-sm
.bg-light .bg-darken-md
.bg-light .bg-darken-lg
.bg-light .bg-darken-xl
.bg-dark .bg-lighten-xl
.bg-dark .bg-lighten-lg
.bg-dark .bg-lighten-md
.bg-dark .bg-lighten-sm
.bg-dark .bg-lighten-xs
.bg-dark
.bg-dark .bg-darken-xs
.bg-dark .bg-darken-sm
.bg-dark .bg-darken-md
.bg-dark .bg-darken-lg
.bg-dark .bg-darken-xl
.bg-gray .bg-lighten-xl
.bg-gray .bg-lighten-lg
.bg-gray .bg-lighten-md
.bg-gray .bg-lighten-sm
.bg-gray .bg-lighten-xs
.bg-gray
.bg-gray .bg-darken-xs
.bg-gray .bg-darken-sm
.bg-gray .bg-darken-md
.bg-gray .bg-darken-lg
.bg-gray .bg-darken-xl
Extended colors
.bg-blue .bg-lighten-xl
.bg-blue .bg-lighten-lg
.bg-blue .bg-lighten-md
.bg-blue .bg-lighten-sm
.bg-blue .bg-lighten-xs
.bg-blue
.bg-blue .bg-darken-xs
.bg-blue .bg-darken-sm
.bg-blue .bg-darken-md
.bg-blue .bg-darken-lg
.bg-blue .bg-darken-xl
.bg-indigo .bg-lighten-xl
.bg-indigo .bg-lighten-lg
.bg-indigo .bg-lighten-md
.bg-indigo .bg-lighten-sm
.bg-indigo .bg-lighten-xs
.bg-indigo
.bg-indigo .bg-darken-xs
.bg-indigo .bg-darken-sm
.bg-indigo .bg-darken-md
.bg-indigo .bg-darken-lg
.bg-indigo .bg-darken-xl
.bg-navy .bg-lighten-xl
.bg-navy .bg-lighten-lg
.bg-navy .bg-lighten-md
.bg-navy .bg-lighten-sm
.bg-navy .bg-lighten-xs
.bg-navy
.bg-navy .bg-darken-xs
.bg-navy .bg-darken-sm
.bg-navy .bg-darken-md
.bg-navy .bg-darken-lg
.bg-navy .bg-darken-xl
.bg-maroon .bg-lighten-xl
.bg-maroon .bg-lighten-lg
.bg-maroon .bg-lighten-md
.bg-maroon .bg-lighten-sm
.bg-maroon .bg-lighten-xs
.bg-maroon
.bg-maroon .bg-darken-xs
.bg-maroon .bg-darken-sm
.bg-maroon .bg-darken-md
.bg-maroon .bg-darken-lg
.bg-maroon .bg-darken-xl
.bg-brown .bg-lighten-xl
.bg-brown .bg-lighten-lg
.bg-brown .bg-lighten-md
.bg-brown .bg-lighten-sm
.bg-brown .bg-lighten-xs
.bg-brown
.bg-brown .bg-darken-xs
.bg-brown .bg-darken-sm
.bg-brown .bg-darken-md
.bg-brown .bg-darken-lg
.bg-brown .bg-darken-xl
.bg-purple .bg-lighten-xl
.bg-purple .bg-lighten-lg
.bg-purple .bg-lighten-md
.bg-purple .bg-lighten-sm
.bg-purple .bg-lighten-xs
.bg-purple
.bg-purple .bg-darken-xs
.bg-purple .bg-darken-sm
.bg-purple .bg-darken-md
.bg-purple .bg-darken-lg
.bg-purple .bg-darken-xl
.bg-pink .bg-lighten-xl
.bg-pink .bg-lighten-lg
.bg-pink .bg-lighten-md
.bg-pink .bg-lighten-sm
.bg-pink .bg-lighten-xs
.bg-pink
.bg-pink .bg-darken-xs
.bg-pink .bg-darken-sm
.bg-pink .bg-darken-md
.bg-pink .bg-darken-lg
.bg-pink .bg-darken-xl
.bg-magenta .bg-lighten-xl
.bg-magenta .bg-lighten-lg
.bg-magenta .bg-lighten-md
.bg-magenta .bg-lighten-sm
.bg-magenta .bg-lighten-xs
.bg-magenta
.bg-magenta .bg-darken-xs
.bg-magenta .bg-darken-sm
.bg-magenta .bg-darken-md
.bg-magenta .bg-darken-lg
.bg-magenta .bg-darken-xl
.bg-red .bg-lighten-xl
.bg-red .bg-lighten-lg
.bg-red .bg-lighten-md
.bg-red .bg-lighten-sm
.bg-red .bg-lighten-xs
.bg-red
.bg-red .bg-darken-xs
.bg-red .bg-darken-sm
.bg-red .bg-darken-md
.bg-red .bg-darken-lg
.bg-red .bg-darken-xl
.bg-orange .bg-lighten-xl
.bg-orange .bg-lighten-lg
.bg-orange .bg-lighten-md
.bg-orange .bg-lighten-sm
.bg-orange .bg-lighten-xs
.bg-orange
.bg-orange .bg-darken-xs
.bg-orange .bg-darken-sm
.bg-orange .bg-darken-md
.bg-orange .bg-darken-lg
.bg-orange .bg-darken-xl
.bg-yellow .bg-lighten-xl
.bg-yellow .bg-lighten-lg
.bg-yellow .bg-lighten-md
.bg-yellow .bg-lighten-sm
.bg-yellow .bg-lighten-xs
.bg-yellow
.bg-yellow .bg-darken-xs
.bg-yellow .bg-darken-sm
.bg-yellow .bg-darken-md
.bg-yellow .bg-darken-lg
.bg-yellow .bg-darken-xl
.bg-lime .bg-lighten-xl
.bg-lime .bg-lighten-lg
.bg-lime .bg-lighten-md
.bg-lime .bg-lighten-sm
.bg-lime .bg-lighten-xs
.bg-lime
.bg-lime .bg-darken-xs
.bg-lime .bg-darken-sm
.bg-lime .bg-darken-md
.bg-lime .bg-darken-lg
.bg-lime .bg-darken-xl
.bg-green .bg-lighten-xl
.bg-green .bg-lighten-lg
.bg-green .bg-lighten-md
.bg-green .bg-lighten-sm
.bg-green .bg-lighten-xs
.bg-green
.bg-green .bg-darken-xs
.bg-green .bg-darken-sm
.bg-green .bg-darken-md
.bg-green .bg-darken-lg
.bg-green .bg-darken-xl
.bg-teal .bg-lighten-xl
.bg-teal .bg-lighten-lg
.bg-teal .bg-lighten-md
.bg-teal .bg-lighten-sm
.bg-teal .bg-lighten-xs
.bg-teal
.bg-teal .bg-darken-xs
.bg-teal .bg-darken-sm
.bg-teal .bg-darken-md
.bg-teal .bg-darken-lg
.bg-teal .bg-darken-xl
.bg-cyan .bg-lighten-xl
.bg-cyan .bg-lighten-lg
.bg-cyan .bg-lighten-md
.bg-cyan .bg-lighten-sm
.bg-cyan .bg-lighten-xs
.bg-cyan
.bg-cyan .bg-darken-xs
.bg-cyan .bg-darken-sm
.bg-cyan .bg-darken-md
.bg-cyan .bg-darken-lg
.bg-cyan .bg-darken-xl
.bg-black .bg-lighten-xl
.bg-black .bg-lighten-lg
.bg-black .bg-lighten-md
.bg-black .bg-lighten-sm
.bg-black .bg-lighten-xs
.bg-black
.bg-black .bg-darken-xs
.bg-black .bg-darken-sm
.bg-black .bg-darken-md
.bg-black .bg-darken-lg
.bg-black .bg-darken-xl
.bg-gray .bg-lighten-xl
.bg-gray .bg-lighten-lg
.bg-gray .bg-lighten-md
.bg-gray .bg-lighten-sm
.bg-gray .bg-lighten-xs
.bg-gray
.bg-gray .bg-darken-xs
.bg-gray .bg-darken-sm
.bg-gray .bg-darken-md
.bg-gray .bg-darken-lg
.bg-gray .bg-darken-xl
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-info.bg-gradient
.bg-warning.bg-gradient
.bg-danger.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
.bg-gray.bg-gradient
Opacity
Change the background color opacity by changing it’s alpha channel using bg-opacity-*. Available for all default theme colors and extended colors, too
Change the background color on element’s active state. It means, when element gets hover state, when it gets .active or .show class, or when element becomes visible in the viewport and gets .inview class. This feature is part of the Torus Kit Effects & Interactions.
Background color
To change the background color use data-tor="<trigger>:bg(<variant>)"
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.
// 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(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: $gray-700, $end-color: $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: $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(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: $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, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);}