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-colors in 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 .active class:
.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
.hoverable with .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
.hoverable with .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
property is one of:
no-repeatto setbackground-repeat: no-repeatposition-y-topto setbackground-position-y: topposition-y-bottomto setbackground-position-y: bottomposition-y-centerto setbackground-position-y: centerposition-x-startto setbackground-position-x: leftposition-x-endto setbackground-position-x: rightposition-x-centerto setbackground-position-x: centerposition-bottomto setbackground-position: 0 bottomposition-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 xs and .bgi-size-{breakpoint}-{property}
for sm, md, lg, xl, and xxl.
Where
property is one of:
autoto setbackground-size: autocoverto setbackground-size: covercontainto 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>
2024©
Keenthemes
