Background Colors
Easily set the background of an element to any contextual class as shown below:
.bg-lighten
.bg-white
.bg-primary
.bg-light
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-dark
<div class="bg-lighten"></div>
<div class="bg-white"></div>
<div class="bg-primary"></div>
<div class="bg-light"></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>
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-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-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-lighten
.bg-active-white
.bg-active-primary
.bg-active-light
.bg-active-secondary
.bg-active-success
.bg-active-info
.bg-active-warning
.bg-active-danger
.bg-active-dark
<div class="bg-active-lighten text-active-inverse-lighten active"></div>
<div class="bg-active-white text-active-inverse-white active"></div>
<div class="bg-active-primary text-active-inverse-primary active"></div>
<div class="bg-active-light text-active-inverse-light 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-lighten
.bg-hover-white
.bg-hover-primary
.bg-hover-light
.bg-hover-secondary
.bg-hover-success
.bg-hover-info
.bg-hover-warning
.bg-hover-danger
.bg-hover-dark
<div class="bg-hover-lighten text-hover-inverse-lighten"></div>
<div class="bg-hover-white text-hover-inverse-white"></div>
<div class="bg-hover-primary text-hover-inverse-primary"></div>
<div class="bg-hover-light text-hover-inverse-light"></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-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-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>
Hoverable Background Colors
Use
.hoverablewith
.bg-{color}class to set an element's background color with hover state:.bg-white .hoverable
.bg-primary .hoverable
.bg-light .hoverable
.bg-secondary .hoverable
.bg-success .hoverable
.bg-info .hoverable
.bg-warning .hoverable
.bg-danger .hoverable
.bg-dark .hoverable
<div class="bg-white hoverable"></div>
<div class="bg-primary hoverable"></div>
<div class="bg-light hoverable"></div>
<div class="bg-secondary hoverable"></div>
<div class="bg-success hoverable"></div>
<div class="bg-info hoverable"></div>
<div class="bg-warning hoverable"></div>
<div class="bg-danger hoverable"></div>
<div class="bg-dark hoverable"></div>
Hoverable Light Background Colors
Use
.hoverablewith
.bg-light-{color}class to set an element's light background color with hover state:.bg-primary .hoverable
.bg-success .hoverable
.bg-info .hoverable
.bg-warning .hoverable
.bg-danger .hoverable
.bg-dark .hoverable
<div class="bg-light-primary hoverable"></div>
<div class="bg-light-success hoverable"></div>
<div class="bg-light-info hoverable"></div>
<div class="bg-light-warning hoverable"></div>
<div class="bg-light-danger hoverable"></div>
<div class="bg-light-dark hoverable"></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 setbackground-repeat: no-repeat -
position-y-topto setbackground-position-y: top -
position-y-bottomto setbackground-position-y: bottom -
position-y-centerto setbackground-position-y: center -
position-x-startto setbackground-position-x: left -
position-x-endto setbackground-position-x: right -
position-x-centerto setbackground-position-x: center -
position-bottomto setbackground-position: 0 bottom -
position-centerto setbackground-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 setbackground-size: auto -
coverto setbackground-size: cover -
containto setbackground-size: contain
<div style="background-image: url(image.png)" class="bgi-size-contain bgi-size-lg-auto bgi-no-repeat bgi-position-center"></div>
2021©
Keenthemes
