Badges

Default Badges

Use the badge class to set a default badge.

Primary Secondary Success Info Warning Danger Dark Light

Soft Badges

Use the badge-soft- class with the below-mentioned variation to create a softer badge.

Primary Secondary Success Info Warning Danger Dark Light

Outline Badges

Use the badge-outline- class with the below-mentioned variation to create a badge with the outline.

Primary Secondary Success Info Warning Danger Dark Light

Rounded Pill Badges

Use the rounded-pill class to make badges more rounded with a larger border-radius.

Primary Secondary Success Info Warning Danger Dark Light

Rounded Pill Badges with soft effect

Use the rounded-pill badge-soft- class with the below-mentioned variation to create a badge more rounded with a soft background.

Primary Secondary Success Info Warning Danger Dark Light

Soft Border Badges

Use the badge-border and badge-soft- with below mentioned modifier classes to make badges with border & soft backgorund.

Primary Secondary Success Danger Warning Info Dark Light

Outline Pill Badges

Use the rounded-pill badge-outline- class with the below-mentioned variation to create a outline Pill badge.

Primary Secondary Success Info Warning Danger Dark Light

Label Badges

Use the badge-label class to create a badge with the label.

Primary Secondary Success Danger Warning Info Dark Light

Gradient Badges

Use the badge-gradient-* class to create a gradient styled badge.

Primary Secondary Success Danger Warning Info Dark

Button Position Badges

Use the below utilities to modify a badge and position it in the corner of a link or button.

Badges With Button

Badges can be used as part of buttons to provide a counter.

Badges with Heading

Example of the badge used in the HTML Heading.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
© Invoika.
Design & Develop by Themesbrand