| State | Class postfix | Usage example | |
|---|---|---|---|
| Bootstrap States | |||
| Success | *-success |
btn-success font-success |
|
| Warning | *-warning |
btn-warning font-warning |
|
| Danger | *-danger |
btn-danger font-danger |
|
| Info | *-info |
btn-info font-info |
|
| Primary | *-primary |
btn-primary font-primary |
|
| FATbit admin Custom States | |||
| Brand | *-brand |
btn-success font-brand |
|
| Dark | *-dark |
btn-dark font-dark |
|
| Light | *-light |
btn-light font-light |
|
Page sub tittle
State Colors
You can apply Bootstrap and FATbit admin state color helper classes to the most of the Keen's components:
Base Colors
You can apply Keen's base color helper classes to the most of the Keen's components:
| Level | Preview | Class example | |
|---|---|---|---|
| Label Classes | |||
| Level 1 | Font Color BG Color | label-font-color-1 label-bg-color-1 |
|
| Level 2 | Font Color BG Color | label-font-color-2 label-bg-color-2 |
|
| Level 3 | Font Color BG Color | label-font-color-3 label-bg-color-3 |
|
| Level 4 | Font Color BG Color | label-font-color-4 label-bg-color-4 |
|
| Shape Classes | |||
| Level 1 | Font Color BG Color | shape-font-color-1 shape-bg-color-1 |
|
| Level 2 | Font Color BG Color | shape-font-color-2 shape-bg-color-2 |
|
| Level 3 | Font Color BG Color | shape-font-color-3 shape-bg-color-3 |
|
| Level 4 | Font Color BG Color | shape-font-color-4 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
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
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
Well done! You successfully read this important alert message.
