Bootstrap Background color

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

Overview

Add background color based on its content using contextual color or choose from Extended Bootstrap color palette. Change the color lightness or darkness by using Shading classes, or set the background color opacity by changing its alpha channel.

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.

.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
.bg-gray
.bg-body
.bg-white
.bg-transparent
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-info text-dark">.bg-info</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-gray text-white">.bg-gray</div>
<div class="bg-body text-dark">.bg-body</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>

Extended background color palette

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:

.bg-blue
.bg-indigo
.bg-navy
.bg-maroon
.bg-brown
.bg-purple
.bg-pink
.bg-magenta
.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-teal
.bg-cyan
.bg-black
.bg-gray
.bg-white
.bg-transparent
<div class="bg-blue text-white">.bg-blue</div>
<div class="bg-indigo text-white">.bg-indigo</div>
<div class="bg-navy text-white">.bg-navy</div>
<div class="bg-maroon text-white">.bg-maroon</div>
<div class="bg-brown text-white">.bg-brown</div>
<div class="bg-purple text-white">.bg-purple</div>
<div class="bg-pink text-white">.bg-pink</div>
<div class="bg-magenta text-white">.bg-magenta</div>
<div class="bg-red text-white">.bg-red</div>
<div class="bg-orange text-white">.bg-orange</div>
<div class="bg-yellow text-white">.bg-yellow</div>
<div class="bg-lime text-white">.bg-lime</div>
<div class="bg-green text-white">.bg-green</div>
<div class="bg-teal text-white">.bg-teal</div>
<div class="bg-cyan text-white">.bg-cyan</div>
<div class="bg-black text-white">.bg-black</div>
<div class="bg-gray text-white">.bg-gray</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>

Shade variants

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

.bg-opacity-0
.bg-opacity-5
.bg-opacity-10
.bg-opacity-20
.bg-opacity-30
.bg-opacity-40
.bg-opacity-50
.bg-opacity-60
.bg-opacity-70
.bg-opacity-80
.bg-opacity-90
<div class="bg-primary bg-opacity-0 border">.bg-opacity-0</div>
<div class="bg-primary bg-opacity-5">.bg-opacity-5</div>
<div class="bg-primary bg-opacity-10">.bg-opacity-10</div>
<div class="bg-primary bg-opacity-20">.bg-opacity-20</div>
<div class="bg-primary bg-opacity-30">.bg-opacity-30</div>
<div class="bg-primary bg-opacity-40">.bg-opacity-40</div>
<div class="bg-primary bg-opacity-50">.bg-opacity-50</div>
<div class="bg-primary bg-opacity-60">.bg-opacity-60</div>
<div class="bg-primary bg-opacity-70">.bg-opacity-70</div>
<div class="bg-primary bg-opacity-80">.bg-opacity-80</div>
<div class="bg-primary bg-opacity-90">.bg-opacity-90</div>

Active state

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>)"

bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="hover:bg(primary)">bg(primary)</div>
<div data-tor="hover:bg(secondary)">bg(secondary)</div>
<div data-tor="hover:bg(success)">bg(success)</div>
<div data-tor="hover:bg(danger)">bg(danger)</div>
<div data-tor="hover:bg(warning)">bg(warning)</div>
<div data-tor="hover:bg(info)">bg(info)</div>
<div data-tor="hover:bg(light)">bg(light)</div>
<div data-tor="hover:bg(dark)">bg(dark)</div>
<div data-tor="hover:bg(white)">bg(white)</div>
<div data-tor="hover:bg(transparent)">bg(transparent)</div>
bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="active:bg(primary)">bg(primary)</div>
<div data-tor="active:bg(secondary)">bg(secondary)</div>
<div data-tor="active:bg(success)">bg(success)</div>
<div data-tor="active:bg(danger)">bg(danger)</div>
<div data-tor="active:bg(warning)">bg(warning)</div>
<div data-tor="active:bg(info)">bg(info)</div>
<div data-tor="active:bg(light)">bg(light)</div>
<div data-tor="active:bg(dark)">bg(dark)</div>
<div data-tor="active:bg(white)">bg(white)</div>
<div data-tor="active:bg(transparent)">bg(transparent)</div>
bg(primary)
bg(secondary)
bg(success)
bg(danger)
bg(warning)
bg(info)
bg(light)
bg(dark)
bg(white)
bg(transparent)
<div data-tor="inview:bg(primary)">bg(primary)</div>
<div data-tor="inview:bg(secondary)">bg(secondary)</div>
<div data-tor="inview:bg(success)">bg(success)</div>
<div data-tor="inview:bg(danger)">bg(danger)</div>
<div data-tor="inview:bg(warning)">bg(warning)</div>
<div data-tor="inview:bg(info)">bg(info)</div>
<div data-tor="inview:bg(light)">bg(light)</div>
<div data-tor="inview:bg(dark)">bg(dark)</div>
<div data-tor="inview:bg(white)">bg(white)</div>
<div data-tor="inview:bg(transparent)">bg(transparent)</div>

Shading

To change the background color use data-tor="<trigger>:bg-<lighten|darken>(<value>)"

bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="hover:bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="hover:bg-lighten(xl)">bg-lighten(xl)</div>
bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="active:bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="active:bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="active:bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="active:bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="active:bg-lighten(xl)">bg-lighten(xl)</div>
bg-lighten(xs)
bg-lighten(sm)
bg-lighten(md)
bg-lighten(lg)
bg-lighten(xl)
<div class="bg-primary" data-tor="inview:bg-lighten(xs)">bg-lighten(xs)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(sm)">bg-lighten(sm)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(md)">bg-lighten(md)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(lg)">bg-lighten(lg)</div>
<div class="bg-primary" data-tor="inview:bg-lighten(xl)">bg-lighten(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="hover:bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="hover:bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="hover:bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="hover:bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="hover:bg-darken(xl)">bg-darken(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="active:bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="active:bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="active:bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="active:bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="active:bg-darken(xl)">bg-darken(xl)</div>
bg-darken(xs)
bg-darken(sm)
bg-darken(md)
bg-darken(lg)
bg-darken(xl)
<div class="bg-primary" data-tor="inview:bg-darken(xs)">bg-darken(xs)</div>
<div class="bg-primary" data-tor="inview:bg-darken(sm)">bg-darken(sm)</div>
<div class="bg-primary" data-tor="inview:bg-darken(md)">bg-darken(md)</div>
<div class="bg-primary" data-tor="inview:bg-darken(lg)">bg-darken(lg)</div>
<div class="bg-primary" data-tor="inview:bg-darken(xl)">bg-darken(xl)</div>

Opacity

To change the background color use data-tor="<trigger>:bg-opacity(<value>)"

bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="hover:bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="hover:bg-opacity(100%)">bg-opacity(100%)</div>
bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="active:bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="active:bg-opacity(100%)">bg-opacity(100%)</div>
bg-opacity(0%)
bg-opacity(5%)
bg-opacity(10%)
bg-opacity(20%)
bg-opacity(30%)
bg-opacity(40%)
bg-opacity(50%)
bg-opacity(60%)
bg-opacity(70%)
bg-opacity(80%)
bg-opacity(90%)
bg-opacity(100%)
<div class="bg-primary" data-tor="inview:bg-opacity(0%)">bg-opacity(0%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(5%)">bg-opacity(5%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(10%)">bg-opacity(10%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(20%)">bg-opacity(20%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(30%)">bg-opacity(30%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(40%)">bg-opacity(40%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(50%)">bg-opacity(50%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(60%)">bg-opacity(60%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(70%)">bg-opacity(70%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(80%)">bg-opacity(80%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(90%)">bg-opacity(90%)</div>
<div class="bg-primary" data-tor="inview:bg-opacity(100%)">bg-opacity(100%)</div>

Sass

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

Variables

Most background-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:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$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-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

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
);

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(--#{$variable-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(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);
}

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,
  values: map-merge(
    $theme-colors,
    (
      "body": $body-bg,
      "white": $white,
      "transparent": transparent
    )
  )
),