Documentation v1.0.6

Preview Upgrade to Pro

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-repeat to set background-repeat: no-repeat
  • position-y-top to set background-position-y: top
  • position-y-bottom to set background-position-y: bottom
  • position-y-center to set background-position-y: center
  • position-x-start to set background-position-x: left
  • position-x-end to set background-position-x: right
  • position-x-center to set background-position-x: center
  • position-bottom to set background-position: 0 bottom
  • position-center to 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 xs and .bgi-size-{breakpoint}-{property} for sm, md, lg, xl, and xxl.
Where property is one of:
  • auto to set background-size: auto
  • cover to set background-size: cover
  • contain to 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>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now