Documentation v8.0.36

Preview Downloads Purchase

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

Explore

Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 939
Custom License
Reach us for custom license offers.
Buy Now
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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now