• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Tag pills

  2. Ui Kits
  3. Tag pills

Badges

Use the .badge utility class to make more badges.

PrimarySecondary SuccessInfoWarningDanger Light Dark
<div class="badge-spacing">
<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">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark">Dark</span>
</div>

Pills

Use the .rounded-pill class to make badges more rounded pills on badges.

Primary Secondary Success InfoWarningDangerLightDark
<div class="badge-spacing">
<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">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">Dark</span>
</div>

Number Badges

Use numbers as a badge with the help of .badge class.

123 45 678 
<div class="badge-spacing">
<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">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark">Dark</span>
</div>

Number Pills

Set rounded pill with number using .rounded-circle class.

1 23 4 5678
<div class="badge-spacing">
<a class="badge rounded-circle badge-primary" href="#">1</a>
<a class="badge rounded-circle badge-secondary" href="#">2</a>
<a class="badge rounded-circle badge-success" href="#">3</a>
<a class="badge rounded-circle badge-info" href="#">4</a>
<a class="badge rounded-circle badge-warning" href="#">5</a>
<a class="badge rounded-circle badge-danger" href="#">6</a>
<a class="badge rounded-circle badge-light text-dark" href="#">7</a>
<a class="badge rounded-circle badge-dark" href="#">8</a>
</div>

Icon With Badge

Use icons with the help of .badge class.

<div class="badge-spacing">
<a class="badge badge-primary text-light" href="#">
<i class="fa-light fa-dollar-sign"></i>
</a>
<a class="badge badge-secondary" href="#">
<i class="fa-solid fa-headphones-simple"></i>
</a>
<a class="badge badge-success" href="#">
<i class="fa-solid fa-link"></i>
</a>
<a class="badge badge-info" href="#">
<i class="fa-brands fa-github"></i>
</a>
<a class="badge badge-warning" href="#">
<i class="fa-solid fa-award"></i>
</a>
<a class="badge badge-danger" href="#">
<i class="fa-solid fa-chart-line"></i>
</a>
<a class="badge badge-light text-dark" href="#">
<i class="fa-regular fa-heart"></i>
</a>
<a class="badge badge-dark" href="#">
<i class="fa-regular fa-envelope"></i>
</a>
</div>

Icon With Pills

Set rounded icons badge with help of .rounded-pill class.

<div class="badge-spacing">
<a class="badge rounded-circle badge-primary" href="#">
<i class="fa-light fa-dollar-sign"></i>
</a>
<a class="badge rounded-circle badge-secondary" href="#">
<i class="fa-solid fa-headphones-simple"></i>
</a>
<a class="badge rounded-circle badge-success" href="#">
<i class="fa-solid fa-link"></i>
</a>
<a class="badge rounded-circle badge-info" href="#">
<i class="fa-brands fa-github"></i>
</a>
<a class="badge rounded-circle badge-warning" href="#">
<i class="fa-solid fa-award"></i>
</a>
<a class="badge rounded-circle badge-danger" href="#">
<i class="fa-solid fa-chart-line"></i>
</a>
<a class="badge rounded-circle badge-light text-dark" href="#">
<i class="fa-regular fa-heart"></i>
</a>
<a class="badge rounded-circle badge-dark" href="#">
<i class="fa-regular fa-envelope"></i>
</a>
</div>

Badge Headings

Set the badge with html heading h1 through h6 using .badge class.

Badge Heading 1Latest

Badge Heading 2Trending

Badge Heading 3Checkout

Badge Heading 4Inbox

Badge Heading 5Login
Badge Heading 6Logout
<div class="card-body bage-heading">
<h1 class="pb-2 d-flex gap-2 flex-wrap align-items-center">Badge Heading 1
<span class="badge btn-primary">Latest</span>
</h1>
<h2 class="pb-2 d-flex gap-2 flex-wrap align-items-center">Badge Heading 2
<span class="badge btn-secondary">Trending</span>
</h2>
<h3 class="pb-2 d-flex gap-2 flex-wrap align-items-center">Badge Heading 3
<span class="badge btn-success">Checkout</span>
</h3>
<h4 class="pb-2 d-flex gap-2 flex-wrap align-items-center">Badge Heading 4
<span class="badge btn-warning">Inbox</span>
</h4>
<h5 class="pb-2 d-flex gap-2 flex-wrap align-items-center">Badge Heading 5
<span class="badge btn-danger">Login</span>
</h5>
<h6 class="pb-2 d-flex gap-2 flex-wrap align-items-center">Badge Heading 6
<span class="badge btn-dark">Logout</span>
</h6>
</div>

Badges With Buttons

Add icons as a badge inside the button with the help of .btn class.

<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 btn-light text-dark ms-2">
<i class="fa-regular fa-envelope"></i>
</span>
</button>
<button class="btn btn-secondary d-flex align-items-center" type="button">notifications
<span class="badge rounded-circle btn-p-space btn-light text-dark ms-2">
<i class="fa-regular fa-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 btn-light text-dark ms-2">
<i class="fa-solid fa-gear"></i>
</span>
</button>
<button class="btn btn-info d-flex align-items-center text-light" type="button">Playing Now
<span class="badge rounded-circle btn-p-space btn-light text-dark ms-2">
<i class="fa-solid fa-music"></i>
</span>
</button>
</div>