Badges are inline elements with multiple styles that can be used to create numbers indicators and unread counts.
To create a badge, add .bs-badgeCSS class to any element.
You can use the color helper CSS classes to add different backgrounds to the label element.
The .label-primarycolor can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.
| Result | Helper class | Description |
|---|---|---|
| 5 | .badge-primary | This is the primarybackground color. |
The color helper classes below come packed with the Supina Framework.
| Result | Helper class | Description |
|---|---|---|
| 21 | .badge-default | This is the defaultbackground color. |
| 56 | .badge-success | Used for successactions. |
| 573 | .badge-danger | Used for erroractions. |
| 12 | .badge-warning | Used for warningactions. |
| 43 | .badge-info | Used for informationactions. |
These helper classes also come packed with the Supina Framework.
| Result | Helper class | Description |
|---|---|---|
| 9 | .badge-blue-alt | Alternate blue background. |
| 7 | .badge-yellow | Yellow background. |
| 4 | .badge-purple | Purple background. |
| 1 | .badge-azure | Azure background. |
| 456 | .badge-black | Black background. |
| 51 | .badge-black-alt | black alternate background. |
To create an absolute badge, add .badge-absoluteCSS class to the .bs-badgeelement.
Use the examples below to create status indicator badges for profile images or similar elements.
On the other hand, we denounce...
Dislike men who are so beguiled...
Of pleasure of the moment, so...
That they cannot foresee the...
Pain and trouble that are bound...
Equal blame belongs to those...
Weakness of will, which is same...
These cases are perfectly simple...
