Notifications
Default Badges
Use the badge class to show a default badge.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Rounded Badges
Use the .rounded-pill to create a soft badge more rounded.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Soft Badges
Use the badge-soft- class to create a softer badge.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Soft Rounded Badges
Use the rounded-pill badge-soft- to create a soft badge more rounded
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outline Badges
Use the badge-outline- to create a badge with the outline.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outline Rounded Badges
Use the rounded-pill badge-outline- class to create a outline pill badge.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
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
Light
Dark
Soft Border Rounded 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
Light
Dark
Gradient Badges
Primary
Secondary
Success
Danger
Warning
Info
orange
purple
Gradient Pill Badges
Primary
Secondary
Success
Danger
Warning
Info
orange
purple