Bootstrap Background color

Convey meaning through color, add background colors and control its shade or alpha opacity

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

<div class="p-1 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-1 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-1 mb-2 bg-success text-white">.bg-success</div>
<div class="p-1 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-1 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-1 mb-2 bg-info text-white">.bg-info</div>
<div class="p-1 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-1 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-1 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-1 mb-2 bg-transparent text-dark">.bg-transparent</div>
<div class="p-1 mb-2 bg-black text-white">.bg-black</div>
<div class="p-1 mb-2 bg-grey text-white">.bg-grey</div>

Shade variants

Because we’re using hsla(), it’s easy to make a color lighter or darker. Just use .bg-{variant}-{value} class with .bg-primary, .bg-secondary or .bg-grey.

Where variant is:

  • lighten for classes that lighten the background color
  • darken for classes that darken the background color

And value is a number from 1 to 5.

.bg-primary .bg-lighten-5
.bg-primary .bg-lighten-4
.bg-primary .bg-lighten-3
.bg-primary .bg-lighten-2
.bg-primary .bg-lighten-1
.bg-primary .bg-darken-1
.bg-primary .bg-darken-2
.bg-primary .bg-darken-3
.bg-primary .bg-darken-4
.bg-primary .bg-darken-5
.bg-secondary .bg-lighten-5
.bg-secondary .bg-lighten-4
.bg-secondary .bg-lighten-3
.bg-secondary .bg-lighten-2
.bg-secondary .bg-lighten-1
.bg-secondary .bg-darken-1
.bg-secondary .bg-darken-2
.bg-secondary .bg-darken-3
.bg-secondary .bg-darken-4
.bg-secondary .bg-darken-5
.bg-grey .bg-lighten-5
.bg-grey .bg-lighten-4
.bg-grey .bg-lighten-3
.bg-grey .bg-lighten-2
.bg-grey .bg-lighten-1
.bg-grey .bg-darken-1
.bg-grey .bg-darken-2
.bg-grey .bg-darken-3
.bg-grey .bg-darken-4
.bg-grey .bg-darken-5

Alpha opacity

Primary, secondary, grey color

Add .bg-a-* class into .bg-primary, .bg-secondary or .bg-grey background utility class to set alpha (opacity) value.

.bg-primary .bg-a-90
.bg-primary .bg-a-80
.bg-primary .bg-a-70
.bg-primary .bg-a-60
.bg-primary .bg-a-50
.bg-primary .bg-a-40
.bg-primary .bg-a-30
.bg-primary .bg-a-20
.bg-primary .bg-a-10
.bg-primary .bg-a-0
.bg-secondary .bg-a-90
.bg-secondary .bg-a-80
.bg-secondary .bg-a-70
.bg-secondary .bg-a-60
.bg-secondary .bg-a-50
.bg-secondary .bg-a-40
.bg-secondary .bg-a-30
.bg-secondary .bg-a-20
.bg-secondary .bg-a-10
.bg-secondary .bg-a-0
.bg-grey .bg-a-90
.bg-grey .bg-a-80
.bg-grey .bg-a-70
.bg-grey .bg-a-60
.bg-grey .bg-a-50
.bg-grey .bg-a-40
.bg-grey .bg-a-30
.bg-grey .bg-a-20
.bg-grey .bg-a-10
.bg-grey .bg-a-0

Black color

Control alpha channel (opacity) of .bg-black color using .bg-a-* class.

.bg-black .bg-a-90
.bg-black .bg-a-80
.bg-black .bg-a-70
.bg-black .bg-a-60
.bg-black .bg-a-50
.bg-black .bg-a-40
.bg-black .bg-a-30
.bg-black .bg-a-20
.bg-black .bg-a-10
.bg-black .bg-a-0

White color

Control alpha channel (opacity) of .bg-white color using .bg-a-* class.

.bg-white .bg-a-90
.bg-white .bg-a-80
.bg-white .bg-a-70
.bg-white .bg-a-60
.bg-white .bg-a-50
.bg-white .bg-a-40
.bg-white .bg-a-30
.bg-white .bg-a-20
.bg-white .bg-a-10
.bg-white .bg-a-0

Background color palette

With Background color palette you can choose from 15 predefined colors with 5 lighter and 5 darker variants.

  <div class="bg-red"><code>.bg-red</code></div>
  <div class="bg-orange"><code>.bg-orange</code></div>
  <div class="bg-yellow"><code>.bg-yellow</code></div>
  <div class="bg-lime"><code>.bg-lime</code></div>
  <div class="bg-green"><code>.bg-green</code></div>
  <div class="bg-olive"><code>.bg-olive</code></div>
  <div class="bg-teal"><code>.bg-teal</code></div>
  <div class="bg-aqua"><code>.bg-aqua</code></div>
  <div class="bg-blue"><code>.bg-blue</code></div>
  <div class="bg-navy"><code>.bg-navy</code></div>
  <div class="bg-indigo"><code>.bg-indigo</code></div>
  <div class="bg-purple"><code>.bg-purple</code></div>
  <div class="bg-magenta"><code>.bg-magenta</code></div>
  <div class="bg-maroon"><code>.bg-maroon</code></div>
  <div class="bg-brown"><code>.bg-brown</code></div>

Background color mixer

Torus Kit includes Background color mixer utility with more that 190,000 background color combination. You can choose from 24 basic colors and control saturation and lightness to create a new shades. Read more how to use it and why we chose this approach in Background color mixer.

This example shows how you can create a dark navy blue by mixing hue, saturation and lightness with .bg-h-240 .bg-s-50 .bg-l-30 classes.

  • .bg-h-240 represent blue color with 240deg hue
  • .bg-s-50 represents 50% of saturation
  • .bg-l-30 represents 30% of lightness
.bg-h-240 .bg-s-50 .bg-l-30
<div class="p-1 mb-2 text-white bg-h-240 bg-s-50 bg-l-30">.bg-h-240 .bg-s-50 .bg-l-30</div>

Hover state

Torus Kit allows you to easily style a :hover state of background color without adding any CSS. Using data-fx="h:bg-*" attribute you can not only change the background color on hover, but it’s also possible to control saturation, lightness and alpha opacity. Here are some conditions of using .h:bg-*:

  • Only .bg-primary, .bg-secondary, .bg-white and .bg-dark classes from Bootstrap theme colors can be used
  • Any color from Torus Kit Color palette utility can be used
Primary background & secondary on hover
Primary background & darker on hover
<div class="bg-primary" data-fx="h:bg-secondary">data-fx="h:bg-secondary"</div>
<div class="bg-primary" data-fx="h:bg-darken-2">data-fx="h:bg-darken-2"</div>

Custom background color

Torus Kit allows you to set custom background color that are not represented in the color palette together with :hover state. Use .bg[{color}]" class to set a default background color and data-fx="h:bg[{color}]" attribute for background color on :hover. JavaScript is used to generate a CSS style, so you can use any CSS format color without spaces.

#ff669c h:#ed3073
<div class="p-1 mb-2 text-white bg[#7616ef]">#7616ef</div>
<div class="p-1 mb-2 text-white bg[royalBlue]">royalBlue</div>
<div class="p-1 mb-2 text-white bg[hsl(240deg,50%,30%)]">hsl(240deg,50%,30%)</div>
<div class="p-1 mb-2 text-white bg[#ff669c]" data-fx="h:bg[#ed3073]">#ff669c h:#ed3073</div>

Background gradient

When $enable-gradients is set to true (default is false), you can use .bg-gradient- utility classes. Learn about our Sass options to enable these classes and more.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

Dealing with specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.