Documentation v8.0.9

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>

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon