Badges
Badges
Use badge bg-* to create default badges.
Default
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gradient Badges
Use badge bg-*-gradient to create gradient color badges.
Default
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Pill Badges
Use badge rounded-pill bg-* to create rounded pill badges.
Default
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Gradient Pill Badges
Use badge rounded-pill bg-*-gradient to create gradient color pill badges.
Default
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Buttons with square Badges
Use badge bg-* inside btn btn-* to create buttons with square badges.
Outline buttons with square Badges
Use badge bg-* inside btn btn-outline-* to create outline buttons with square badges.
Buttons with rounded Badges
Use badge rounded-pill bg-* inside btn btn-* to create outline buttons with rounded badges.
Border buttons with rounded Badges
Simple Badges
Heading 01 New
Heading 02 New
Heading 03 New
Heading 04 New
Heading 05 New
Heading 06 New
Colored Badges
Heading 01 New
Heading 02 New
Heading 03 New
Heading 04 New
Heading 05 New
Heading 06 New
Extra-Small Badges
Use badge badge-xs to create Extra-Small badges.
Default
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Small Badges
Use badge badge-sm to create Extra-Small badges.
Default
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
