gif
Don't Miss Out! Out new update has been release.
gif
Something you love is now on sale!
Buy now !

Tag & Pills

  2. Ui Kits
  3. Tag & Pills

Badges Contextual Variations

Use the.badge utility class to make more badges.

PrimarySecondarySuccessInfoWarningDangerLightDark 
<!--You can use badge-* class through change the colors of badges (primary/secondary/success...).-->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>

Pills Contextual Variations

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

PrimarySecondarySuccessInfoWarningDangerLightDark 
<!--You can use .rounded-pill class through change the rounded badges (rounded-pill).-->
<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-info">Info</span>
<span class="badge rounded-pill badge-warning text-dark">Warning</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-light text-dark">Light</span>
<span class="badge rounded-pill badge-dark tag-pills-sm-mb">Dark</span>

Number of Badge

Use the .badge utility class to make number of more badges.

12345678 
<!--You can use badge-* class through make badges (Numbered Badges).-->
<a class="badge badge-primary" href="#">1</a>
<a class="badge badge-secondary" href="#">2</a>
<a class="badge badge-success" href="#">3</a>
<a class="badge badge-info" href="#">4</a>
<a class="badge badge-warning text-dark" href="#">5</a>
<a class="badge badge-danger" href="#">6</a>
<a class="badge badge-light text-dark" href="#">7</a>
<a class="badge badge-dark" href="#">8</a>

Number of Pills Tags

Use the .rounded-circle utility class to make badges more rounded with a larger border-radius.

12345678 
<!--You can use .rounded-circle class through change the circled badges (rounded-circle).-->
<span class="badge rounded-circle badge-p-space badge-primary">1</span>
<span class="badge rounded-circle badge-p-space badge-secondary">2</span>
<span class="badge rounded-circle badge-p-space badge-success">3</span>
<span class="badge rounded-circle badge-p-space badge-info">4</span>
<span class="badge rounded-circle badge-p-space badge-warning text-dark">5</span>
<span class="badge rounded-circle badge-p-space badge-danger">6</span>
<span class="badge rounded-circle badge-p-space badge-light text-dark">7</span>
<span class="badge rounded-circle badge-p-space badge-dark">8</span>

Badge Tags With Icons

Use the .badge utility class to make more icons.

<!--You can use data-feather icons through change the icons badges.-->
<a class="badge badge-primary" href="#"><i data-feather="dollar-sign"></i></a>
<a class="badge badge-secondary" href="#"><i data-feather="headphones"></i></a>
<a class="badge badge-success" href="#"><i data-feather="link"></i></a>
<a class="badge badge-info" href="#"><i data-feather="github"></i></a>
<a class="badge badge-warning text-dark" href="#"><i data-feather="award"></i></a>
<a class="badge badge-danger" href="#"><i data-feather="activity"></i></a>
<a class="badge badge-light text-dark" href="#"><i data-feather="heart"></i></a>
<a class="badge badge-dark" href="#"><i data-feather="mail"></i></a>

Rounded Pills With Icons

Use the .rounded-pill utility class to make icons badges more rounded with a larger border-radius.

<!--You can use .rounded-circle class through change the icons badge.-->
<a class="badge rounded-circle p-2 badge-primary" href="#"><i data-feather="dollar-sign"></i></a>
<a class="badge rounded-circle p-2 badge-secondary" href="#"><i data-feather="headphones"></i></a>
<a class="badge rounded-circle p-2 badge-success" href="#"><i data-feather="link"></i></a>
<a class="badge rounded-circle p-2 badge-info" href="#"><i data-feather="github"></i></a>
<a class="badge rounded-circle p-2 badge-warning text-dark" href="#"><i data-feather="award"></i></a>
<a class="badge rounded-circle p-2 badge-danger" href="#"><i data-feather="activity"></i></a>
<a class="badge rounded-circle p-2 badge-light text-dark" href="#"><i data-feather="heart"></i></a>
<a class="badge rounded-circle p-2 badge-dark" href="#"><i data-feather="mail"></i></a>

Badge Headings Example

All html headings,<h1>through <h6>, are available in .badge tags.

Badge Heading 1Latest

Badge Heading 2Trending

Badge Heading 3Checkout

Badge Heading 4Inbox

Badge Heading 5Login
Badge Heading 6Logout
<!--You can use headings with .badge class.-->
<h1 class="pb-2 d-flex gap-2 flex-wrap">Badge Heading 1<span class="badge badge-primary">Latest</span></h1>
<h2 class="pb-2 d-flex gap-2 flex-wrap">Badge Heading 2<span class="badge badge-secondary">Trending</span></h2>
<h3 class="pb-2 d-flex gap-2 flex-wrap">Badge Heading 3<span class="badge badge-success">Checkout</span></h3>
<h4 class="pb-2 d-flex gap-2 flex-wrap">Badge Heading 4<span class="badge badge-warning">Inbox</span></h4>
<h5 class="pb-2 d-flex gap-2 flex-wrap">Badge Heading 5<span class="badge badge-danger">Login</span></h5>
<h6 class="pb-2 d-flex gap-2 flex-wrap">Badge Heading 6<span class="badge badge-dark">Logout</span></h6>

Badges As Part Buttons

.badge can be used as part of .btn to provide a icons.

<!--You can use badge-* class with any icons used.(badge-icons/headings).-->
<div class="badge-spacing flex-column align-items-start">
<button class="btn btn-primary d-flex align-items-center" type="button">Messages <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="mail"></i></span></button>
<button class="btn btn-secondary d-flex align-items-center" type="button">notifications <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="bell"></i></span></button>
<button class="btn btn-success d-flex align-items-center" type="button">Update available <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="settings"></i></span></button>
<button class="btn btn-info d-flex align-items-center" type="button">Playing Now <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="music"></i></span></button>
<button class="btn btn-warning text-dark d-flex align-items-center" type="button">1.2 GB Used <span class="badge rounded-circle btn-p-space badge-light text-dark ms-2"><i data-feather="alert-triangle"></i></span></button>