- Elements
- Badges
Basic
Code
Primary
Secondary
Success
Danger
Warning
Info
Dark
<!-- primary -->
<span class="badge bg-primary">Primary</span>
<!-- secondary -->
<span class="badge bg-secondary">Secondary</span>
<!-- success -->
<span class="badge bg-success">Success</span>
<!-- danger -->
<span class="badge bg-danger">Danger</span>
<!-- warning -->
<span class="badge bg-warning">Warning</span>
<!-- info -->
<span class="badge bg-info">Info</span>
<!-- dark -->
<span class="badge bg-dark">Dark</span>
Outline
Code
Primary
Secondary
Success
Danger
Warning
Info
Dark
<!-- primary outline -->
<span class="badge badge-outline-primary">Primary</span>
<!-- secondary outline -->
<span class="badge badge-outline-secondary">Secondary</span>
<!-- success outline -->
<span class="badge badge-outline-success">Success</span>
<!-- danger outline -->
<span class="badge badge-outline-danger">Danger</span>
<!-- warning outline -->
<span class="badge badge-outline-warning">Warning</span>
<!-- info outline -->
<span class="badge badge-outline-info">Info</span>
<!-- dark outline -->
<span class="badge badge-outline-dark">Dark</span>
Pills
Code
Primary
Primary
<!-- pills -->
<span class="badge bg-primary rounded-full">Primary</span>
<!-- pills outline -->
<span class="badge badge-outline-primary rounded-full">Primary</span>
Classic
Code
Primary
Primary
<!-- badge -->
<span class="badge bg-primary rounded-none">Primary</span>
<!-- badge outline -->
<span class="badge badge-outline-primary rounded-none">Primary</span>
Badges with Heading
CodeBadges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading Primary
Example heading Success
Example heading Info
Example heading Warning
Example heading Danger
Example heading Dark
<!-- Badges with Heading -->
<h1>Example heading <span class="badge bg-primary">Primary</span></h1>
<h2>Example heading <span class="badge bg-success">Success</span></h2>
<h3>Example heading <span class="badge bg-info">Info</span></h3>
<h4>Example heading <span class="badge bg-warning">Warning</span></h4>
<h5>Example heading <span class="badge bg-danger">Danger</span></h5>
<h6>Example heading <span class="badge bg-dark">Dark</span></h6>
Custom Badges
Code
John
Doe
John
Doex
<!-- icon with text -->
<button type="button" class="btn btn-primary my-4">
<span class="flex items-center">
<svg> ... </svg> Facebook
</span>
<span class="badge absolute ltr:right-0 rtl:left-0 -top-3 bg-danger p-0.5 px-1.5 rounded-full">9</span>
</button>
<!-- text -->
<button type="button" class="btn btn-info my-4"><span>Twitter</span><span class="badge absolute ltr:right-0 rtl:left-0 -top-3 bg-danger p-0.5 px-1.5 rounded-full">4</span></button>
<!-- icon -->
<button type="button" class="btn btn-secondary px-5 my-4">
<svg> ... </svg>
<span class="badge absolute ltr:right-0 rtl:left-0 -top-3 bg-danger p-0.5 px-1.5 rounded-full">8</span>
</button>
<!-- square -->
<button type="button" class="btn btn-dark my-4">Notifications<span class="badge my-0 bg-white-light text-black ltr:ml-4 rtl:mr-4">4</span></button>
<!-- rounded -->
<span class="badge bg-warning p-0 ltr:pr-4 rtl:pl-4 my-4 rounded-full flex items-center text-base"><img src=" /assets/images/profile-34.jpeg " alt="image" class="w-10 h-10 rounded-full object-cover" /><span class="ltr:ml-2 rtl:mr-2">John Doe</span></span>
<!-- rounded with icon -->
<span class="badge bg-danger p-0 ltr:pr-4 rtl:pl-4 my-4 rounded-full flex items-center text-base"><img src=" /assets/images/profile-34.jpeg " alt="image" class="w-10 h-10 rounded-full object-cover" /><span class="ltr:ml-2 rtl:mr-2">John Doe</span><span class="ltr:ml-4 rtl:mr-4 cursor-pointer hover:opacity-90">x</span></span>