Bootstrap Background color

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>

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.

Primary, secondary, grey color

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

Black color

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

White color

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

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>

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

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

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

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

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.

<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