Badges
Default Badges
Use default badges in Bootstrap with the .badge class. Add color classes like .badge-primary, .badge-secondary, etc., to style the badge.
Create a badge with a primary background and rounded pill shape using .badge, .bg-primary, and .rounded-pill classes.
Light Badges
Use default badges in Bootstrap with the .badge class. Add color classes like .bg-primary-subtle, .badge-secondary-subtle, etc., to style the badge.
Create a badge with a primary background and rounded pill shape using .badge, .bg-primary-subtle, and .rounded-pill classes.
Outline Badges
Use default badges in Bootstrap with the .badge class. Add color classes like .border, .border-*, etc., to style the badge.
Create a badge with a primary background and rounded pill shape using .badge, .border, .border-* and .rounded-pill classes.
Button Badges
Add a badge to a Bootstrap button by placing a <span class="badge"> inside the button. This is great for showing counts or notifications on the button.
Button Position Badges
Position badges on Bootstrap buttons by placing a <span class="badge position-absolute"> inside the button. Use utility classes like .top-0 and .end-0 to adjust the badge position.
Badges with Heading
Add badges to headings by placing a <span class="badge"> next to the heading text. This is useful for highlighting important information or counts.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Default Badges
Theme color Archive just adding class .badge
Theme color Archive just adding class .badge