Badges View all kinds of Badges examples below.

Badges

Badges are inline elements with multiple styles that can be used to create numbers indicators and unread counts.

Basic

To create a badge, add .bs-badge CSS class to any element.

Background colors

You can use the color helper CSS classes to add different backgrounds to the label element.

Theme inherited

The .label-primary color 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 primary background color.

Framework inherited

The color helper classes below come packed with the Bratilius Framework.

Result	Helper class	Description
21	.badge-default	This is the default background color.
56	.badge-success	Used for success actions.
573	.badge-danger	Used for error actions.
12	.badge-warning	Used for warning actions.
43	.badge-info	Used for information actions.

Additional colors

These helper classes also come packed with the Bratilius 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.

Absolute positioning

To create an absolute badge, add .badge-absolute CSS class to the .bs-badge element.

Status badges

Use the examples below to create status indicator badges for profile images or similar elements.