Logo

Documentation v8.2.5

  • Home
  • Helpers
  • Background
Downloads Preview
Light
Dark
System

Background Colors

Easily set the background of an element to any contextual class as shown below:

.bg-light

.bg-primary

.bg-secondary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-dark

.bg-white

.bg-body

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

Light Background Colors

Use .bg-light-{color}class to set an element's light background color defined with $theme-light-colorsin sass/_variables.scss:

.bg-light-primary

.bg-light-secondary

.bg-light-success

.bg-light-info

.bg-light-warning

.bg-light-danger

.bg-light-dark

<div class="bg-light-primary text-primary"></div>
<div class="bg-light-secondary text-secondary"></div>
<div class="bg-light-success text-success"></div>
<div class="bg-light-info text-info"></div>
<div class="bg-light-warning text-warning"></div>
<div class="bg-light-danger text-danger"></div>
<div class="bg-light-dark text-dark"></div>

Active Background Colors

Use .bg-active-{color}class to toggle an element's active background color state with .activeclass:

.bg-active-light

.bg-active-primary

.bg-active-secondary

.bg-active-success

.bg-active-info

.bg-active-warning

.bg-active-danger

.bg-active-dark

<div class="bg-active-light text-active-inverse-light active"></div>
<div class="bg-active-primary text-active-inverse-primary active"></div>
<div class="bg-active-secondary text-active-inverse-secondary active"></div>
<div class="bg-active-success text-active-inverse-success active"></div>
<div class="bg-active-info text-active-inverse-info active"></div>
<div class="bg-active-warning text-active-inverse-warning active"></div>
<div class="bg-active-danger text-active-inverse-danger active"></div>
<div class="bg-active-dark text-active-inverse-dark active"></div>

Hover Background Colors

Use .bg-hover-{color}class to set an element's hover background color:

.bg-hover-light

.bg-hover-primary

.bg-hover-secondary

.bg-hover-success

.bg-hover-info

.bg-hover-warning

.bg-hover-danger

.bg-hover-dark

<div class="bg-hover-light text-hover-inverse-light"></div>
<div class="bg-hover-primary text-hover-inverse-primary"></div>
<div class="bg-hover-secondary text-hover-inverse-secondary"></div>
<div class="bg-hover-success text-hover-inverse-success"></div>
<div class="bg-hover-info text-hover-inverse-info"></div>
<div class="bg-hover-warning text-hover-inverse-warning"></div>
<div class="bg-hover-danger text-hover-inverse-danger"></div>
<div class="bg-hover-dark text-hover-inverse-dark"></div>

Hover Light Background Colors

Use .bg-hover-light-{color}class to set an element's hover light background color:

.bg-hover-light-primary

.bg-hover-light-secondary

.bg-hover-light-success

.bg-hover-light-info

.bg-hover-light-warning

.bg-hover-light-danger

.bg-hover-light-dark

<div class="bg-hover-light-primary text-hover-primary"></div>
<div class="bg-hover-light-secondary text-hover-secondary"></div>
<div class="bg-hover-light-success text-hover-success"></div>
<div class="bg-hover-light-info text-hover-info"></div>
<div class="bg-hover-light-warning text-hover-warning"></div>
<div class="bg-hover-light-danger text-hover-danger"></div>
<div class="bg-hover-light-dark text-hover-dark"></div>

Background Opacity

Use .bg-opacity-{0, 5, 10, 15, 20, 25, 50, 75, 100}class with .bg-{color}or .bg-light-{color}to set an element's background color with opacity:
bg-opacity-0
bg-opacity-5
bg-opacity-10
bg-opacity-15
bg-opacity-20
bg-opacity-25
bg-opacity-50
bg-opacity-75
bg-opacity-100
<div class="bg-opacity-0 bg-primary"></div>
<div class="bg-opacity-5 bg-primary"></div>
<div class="bg-opacity-10 bg-primary"></div>
<div class="bg-opacity-15 bg-primary"></div>
<div class="bg-opacity-20 bg-primary"></div>
<div class="bg-opacity-25 bg-primary"></div>
<div class="bg-opacity-50 bg-primary"></div>
<div class="bg-opacity-75 bg-primary"></div>
<div class="bg-opacity-100 bg-primary"></div>

Hover Background Opacity

Use .bg-hover-opacity-{0, 5, 10, 15, 20, 25, 50, 75, 100}class with .bg-{color}or .bg-light-{color}to set an element's background color with opacity on hover:
bg-hover-opacity-0
bg-hover-opacity-5
bg-hover-opacity-10
bg-hover-opacity-15
bg-hover-opacity-20
bg-hover-opacity-25
bg-hover-opacity-50
bg-hover-opacity-75
bg-hover-opacity-100
<div class="bg-hover-opacity-0 bg-primary"></div>
<div class="bg-hover-opacity-5 bg-primary"></div>
<div class="bg-hover-opacity-10 bg-primary"></div>
<div class="bg-hover-opacity-15 bg-primary"></div>
<div class="bg-hover-opacity-20 bg-primary"></div>
<div class="bg-hover-opacity-25 bg-primary"></div>
<div class="bg-hover-opacity-50 bg-primary"></div>
<div class="bg-hover-opacity-75 bg-primary"></div>
<div class="bg-hover-opacity-100 bg-primary"></div>

Active Background Opacity

Use .bg-active-opacity-{0, 5, 10, 15, 20, 25, 50, 75, 100}class with .bg-{color}or .bg-light-{color}to set an element's background color with opacity on active state:
bg-active-opacity-0
bg-active-opacity-5
bg-active-opacity-10
bg-active-opacity-15
bg-active-opacity-20
bg-active-opacity-25
bg-active-opacity-50
bg-active-opacity-75
bg-active-opacity-100
<div class="bg-active-opacity-0 bg-primary active"></div>
<div class="bg-active-opacity-5 bg-primary active"></div>
<div class="bg-active-opacity-10 bg-primary active"></div>
<div class="bg-active-opacity-15 bg-primary active"></div>
<div class="bg-active-opacity-20 bg-primary active"></div>
<div class="bg-active-opacity-25 bg-primary active"></div>
<div class="bg-active-opacity-50 bg-primary active"></div>
<div class="bg-active-opacity-75 bg-primary active"></div>
<div class="bg-active-opacity-100 bg-primary active"></div>

Background Image Classes

Assign background image style values to an element with shorthand classes with the format bgi-{property}.
Where propertyis one of:
  • no-repeatto set background-repeat: no-repeat
  • position-y-topto set background-position-y: top
  • position-y-bottomto set background-position-y: bottom
  • position-y-centerto set background-position-y: center
  • position-x-startto set background-position-x: left
  • position-x-endto set background-position-x: right
  • position-x-centerto set background-position-x: center
  • position-bottomto set background-position: 0 bottom
  • position-centerto set background-position: center
<div style="background-image: url(image.png)" class="bgi-no-repeat bgi-position-center"></div>

Background Image Size Classes

Use responsive-friendly background image size style values for an element with shorthand classes with the format .bgi-size-{breakpoint}-{property}. The classes are named using the format .bgi-size-{property}for xsand .bgi-size-{breakpoint}-{property}for sm, md, lg, xl, and xxl.
Where propertyis one of:
  • autoto set background-size: auto
  • coverto set background-size: cover
  • containto set background-size: contain
<div style="background-image: url(image.png)" class="bgi-size-contain bgi-size-lg-auto bgi-no-repeat bgi-position-center"></div>