State Colors

State Class postfix Usage example
Bootstrap States
Success *-success btn-success kt-font-success
Warning *-warning btn-warning kt-font-warning
Danger *-danger btn-danger kt-font-danger
Info *-info btn-info kt-font-info
Primary *-primary btn-primary kt-font-primary
Metronic Custom States
Brand *-brand btn-success kt-font-brand
Dark *-dark btn-dark kt-font-dark
Light *-light btn-light kt-font-light

Base Colors

Level Preview Class example
Label Classes
Level 1 Font Color   BG Color kt-label-font-color-1  kt-label-bg-color-1
Level 2 Font Color   BG Color kt-label-font-color-2  kt-label-bg-color-2
Level 3 Font Color   BG Color kt-label-font-color-3  kt-label-bg-color-3
Level 4 Font Color   BG Color kt-label-font-color-4  kt-label-bg-color-4
Shape Classes
Level 1 Font Color   BG Color kt-shape-font-color-1  kt-shape-bg-color-1
Level 2 Font Color   BG Color kt-shape-font-color-2  kt-shape-bg-color-2
Level 3 Font Color   BG Color kt-shape-font-color-3  kt-shape-bg-color-3
Level 4 Font Color   BG Color kt-shape-font-color-4  kt-shape-bg-color-4

Typography Examples

Apply state color classes to any typography element:
Success state text  Warning state text  Info state text

Danger state text  Primary state text  Focus state text
Apply base color classes to any typography element:
Label color level 4   Label color level 3   Label color level 2   Label color level 1

Button Examples

Alert Examples

25%

Select A Demo

Default
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Buy Metronic Now!