Buttons with square Badges
Below exapmle badges are button badges.
<div className="text-wrap">
<div className="example">
<Button
variant=""
type="button"
className="btn btn-primary mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-white ms-1">2</span>
</Button>
<Button
variant=""
type="button"
className="btn btn-secondary mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-white ms-1">1</span>
</Button>
</div>
</div>
Border buttons with square Badges
Below exapmle badges are Border buttons badges..
<div className="text-wrap">
<div className="example">
<Button
variant=""
type="button"
className="btn btn-primary mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-white ms-1">2</span>
</Button>
<Button
variant=""
type="button"
className="btn btn-secondary mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-white ms-1">1</span>
</Button>
</div>
</div>
Buttons with rounded Badges
Below exapmle badges are button rounded badges...
<div className="text-wrap">
<div className="example">
<Button
variant=""
type="button"
className="btn btn-info mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-white rounded-pill ms-1">3</span>
</Button>
<Button
variant=""
type="button"
className="btn btn-primary mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-white rounded-pill ms-1">22</span>
</Button>
</div>
</div>
Border buttons with rounded Badges
Below exapmle badges are border button rounded badges...
<div className="text-wrap">
<div className="example">
<Button
variant=""
type="button"
className="btn btn-outline-primary mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-primary rounded-pill ms-1">2</span>
</Button>
<Button
variant=""
type="button"
className="btn btn-outline-success mt-1 mb-1 me-3"
>
<span>Notifications</span>
<span className="badge bg-success rounded-pill ms-1">65</span>
</Button>
</div>
</div>
Link Badges
Badges can be used as part of links or buttons to provide a counter.
<div className="text-wrap">
<div className="example">
<Button
variant=""
type="button"
className="btn btn-primary mt-1 mb-1 me-3"
>
Primary <span className="badge bg-light ms-1">22</span>
</Button>
<Button
variant=""
type="button"
className="btn btn-success mt-1 mb-1 me-3"
>
Success <span className="badge bg-light ms-1">New</span>
</Button>
</div>
</div>
Link Badges
Badges can be used as part of links or buttons to provide a counter.
<div className="text-wrap">
<div className="example">
<Button
variant=""
type="button"
className="btn btn-primary position-relative me-5"
>
Inbox
<span className="position-absolute start-100 translate-middle badge rounded-pill bg-info">
8<span className="visually-hidden">unread messages</span>
</span>
</Button>
<Button
variant=""
type="button"
className="btn btn-success position-relative mb-2 mt-2 me-5"
>
Inbox
<span className="position-absolute start-100 translate-middle badge rounded-pill bg-warning">
82
<span className="visually-hidden">unread messages</span>
</span>
</Button>
</div>
</div>
Simple Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units...
Heading 1 New
Heading 2 New
Heading 3 New
Heading 4 New
Heading 5 New
Heading 6 New
<div className="text-wrap">
<div className="example">
<h1>
Heading 1 <span className="badge bg-light">New</span>
</h1>
<h2>
Heading 2 <span className="badge bg-light">New</span>
</h2>
<h3>
Heading 3 <span className="badge bg-light ">New</span>
</h3>
<h4>
Heading 4 <span className="badge bg-light ">New</span>
</h4>
<h5>
Heading 5 <span className="badge bg-light ">New</span>
</h5>
<h6>
Heading 6 <span className="badge bg-light ">New</span>
</h6>
</div>
</div>
Colored Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units...
Heading 1 New
Heading 2 New
Heading 3 New
Heading 4 New
Heading 5 New
Heading 6 New
<div className="text-wrap">
<div className="example">
<h1 className="text-primary">
Heading 1 <span className="badge bg-primary">New</span>
</h1>
<h2 className="text-danger">
Heading 2 <span className="badge bg-danger">New</span>
</h2>
<h3 className="text-warning">
Heading 3 <span className="badge bg-warning">New</span>
</h3>
<h4 className="text-success">
Heading 4 <span className="badge bg-success">New</span>
</h4>
<h5 className="text-info">
Heading 5 <span className="badge bg-info">New</span>
</h5>
<h6 className="text-secondary">
Heading 6 <span className="badge bg-secondary">New</span>
</h6>
</div>
</div>
BADGES
Badges scale to match the size of the immediate parent element by using relative font sizing and em units...
PrimarySecondarySuccessDangerWarningInfoLightDark
<div className="text-wrap">
<div className="example">
<span className="badge bg-primary me-1 my-2">Primary</span>
<span className="badge bg-secondary me-1">Secondary</span>
<span className="badge bg-success me-1">Success</span>
<span className="badge bg-danger me-1">Danger</span>
<span className="badge bg-warning me-1">Warning</span>
<span className="badge bg-info me-1">Info</span>
<span className="badge bg-light me-1">Light</span>
<span className="badge bg-dark me-1">Dark</span>
</div>
</div>
Pill Badges
Use the .badge-pill modifier className to make badges more rounded.
PrimarySecondarySuccessDangerWarningInfoLightDark
<div className="text-wrap">
<div className="example">
<span className="badge badge-pill bg-primary me-1 my-2">Primary</span>
<span className="badge badge-pill bg-secondary me-1">Secondary</span>
<span className="badge badge-pill bg-success me-1">Success</span>
<span className="badge badge-pill bg-danger me-1">Danger</span>
<span className="badge badge-pill bg-warning me-1">Warning</span>
<span className="badge badge-pill bg-info me-1">Info</span>
<span className="badge badge-pill bg-light me-1">Light</span>
<span className="badge badge-pill bg-dark me-1">Dark</span>
</div>
</div>
