Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Tag & Pills

##### Badges Contextual Variations

Use`badge` class to make more badges.

Primary Secondary Success Info Warning Danger 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 txt-dark">Light</span>
     <span class="badge badge-dark">Dark</span>
    </div>

##### Badges Outline Contextual Variations

Use`badge` class to make more badges.

Primary Secondary Success Info Warning Danger Light Dark

    <div class="badge-spacing">
     <span class="badge badge-b-primary txt-primary">Primary</span>
     <span class="badge badge-b-secondary txt-secondary">Secondary</span>
     <span class="badge badge-b-success txt-success">Success</span>
     <span class="badge badge-b-info txt-info">Info</span>
     <span class="badge badge-b-warning txt-warning">Warning</span>
     <span class="badge badge-b-danger txt-danger">Danger</span>
     <span class="badge badge-b-light txt-dark">Light</span>
     <span class="badge badge-b-dark txt-dark">Dark</span>
    </div>

##### Pill Contextual Variations

Use`rounded-pill`class to make badges with background (badge-*) more rounded with a larger `border-radius`.

Primary Secondary Success Info Warning Danger Light Dark

    <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 txt-dark">Light</span>
     <span class="badge rounded-pill badge-dark">Dark</span>
    </div>

##### Pill Outline Variations

Use`rounded-pill` class to make badges with background (badge-b-*) more rounded with a larger `border-radius`.

Primary Secondary Success Info Warning Danger Light Dark

    <div class="badge-spacing">
     <span class="badge rounded-pill txt-primary badge-b-primary">Primary</span>
     <span class="badge rounded-pill txt-secondary badge-b-secondary">Secondary</span>
     <span class="badge rounded-pill txt-success badge-b-success">Success</span>
     <span class="badge rounded-pill txt-info badge-b-info">Info</span>
     <span class="badge rounded-pill txt-warning badge-b-warning">Warning</span>
     <span class="badge rounded-pill txt-danger badge-b-danger">Danger</span>
     <span class="badge rounded-pill txt-light badge-b-light txt-dark">Light</span>
     <span class="badge rounded-pill txt-dark badge-b-dark">Dark</span>
    </div>

##### Number of Badges

Use`badge` class to make square badges with numbers.

1 2 3 4 5 6 7 8

    <div class="badge-spacing">
     <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" href="#">5</a>
     <a class="badge badge-danger" href="#">6</a>
     <a class="badge badge-light txt-dark" href="#">7</a>
     <a class="badge badge-dark" href="#">8</a>
    </div>

##### Number of Pill Badges

Use`rounded-circle` class to make rounded badges with numbers.

1 2 3 4 5 6 7 8

    <div class="badge-spacing">
     <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">5</span>
     <span class="badge rounded-circle badge-p-space badge-danger">6</span>
     <span class="badge rounded-circle badge-p-space badge-light txt-dark">7</span>
     <span class="badge rounded-circle badge-p-space badge-dark">8</span>
    </div>

##### Badge Tag with Icons

Use`badge` class to make square badges with icons.

    <div class="badge-spacing">
     <a class="badge b-ln-height badge-primary" href="#">
       <i data-feather="dollar-sign"></i>
     </a>
     <a class="badge b-ln-height badge-secondary" href="#">
       <i data-feather="headphones"></i>
     </a>
     <a class="badge b-ln-height badge-success" href="#">
       <i data-feather="link"></i>
     </a>
     <a class="badge b-ln-height badge-info" href="#">
       <i data-feather="github"></i>
     </a>
     <a class="badge b-ln-height badge-warning" href="#">
       <i data-feather="award"></i>
     </a>
     <a class="badge b-ln-height badge-danger" href="#">
       <i data-feather="activity"></i>
     </a>
     <a class="badge b-ln-height badge-light txt-dark" href="#">
       <i data-feather="heart"></i>
     </a>
     <a class="badge badge-dark" href="#">
       <i data-feather="mail"></i>
     </a>
    </div>

##### Rounded Pills with Icons

Use`rounded-circle` class to make rounded badges with icons.

    <div class="badge-spacing">
     <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" 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 txt-dark" href="#">
       <i data-feather="heart"></i>
     </a>
     <a class="badge rounded-circle p-2 badge-dark" href="#">
       <i data-feather="mail"></i>
     </a>
    </div>

##### Badge Headings

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

# Example heading New

    <div class="card-body badge-heading">
     <h1>Example heading
       <span class="badge text-bg-secondary">New</span>
     </h1>
     <h2>Example heading
       <span class="badge text-bg-secondary">New</span>
     </h2>
     <h3>Example heading
       <span class="badge text-bg-secondary">New</span>
     </h3>
     <h4>Example heading
       <span class="badge text-bg-secondary">New</span>
     </h4>
     <h5>Example heading
       <span class="badge text-bg-secondary">New</span>
     </h5>
     <h6>Example heading
       <span class="badge text-bg-secondary">New</span>
     </h6>
    </div>

##### Positioned Badges

Use utilities to modify a `badge` and position it in the corner of a link or button.

    <div class="badge-flex">
     <button class="btn btn-primary position-relative" type="button">Inbox
       <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>
     </button>
     <button class="btn btn-primary position-relative" type="button">Inbox
       <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">99+</span>
     </button>
     <button class="btn btn-info position-relative badge-square" type="button">
       <i class="fa-brands fa-twitter"></i>
       <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">8</span>
     </button>
     <button class="btn btn-primary position-relative" type="button">Profile
       <span class="position-absolute top-0 start-100 translate-middle bg-danger border border-light rounded-circle badge-p-5">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
     <button class="btn btn-info position-relative badge-square" type="button">
       <i class="fa-brands fa-linkedin-in"></i>
       <span class="position-absolute top-0 start-100 translate-middle badge-p-5 bg-danger border border-light rounded-circle">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
     <button class="btn btn-success position-relative badge-square" type="button">
       <i class="fa-solid fa-comments"></i>
       <span class="position-absolute top-0 start-100 translate-middle badge-p-5 bg-danger border border-light rounded-circle">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
     <button class="btn btn-info position-relative badge-square" type="button">
       <i class="fa-brands fa-twitter"></i>
       <span class="position-absolute top-0 start-100 translate-middle badge-p-5 bg-danger border border-light rounded-circle">
         <span class="visually-hidden">New alerts</span>
       </span>
     </button>
    </div>

##### Button Badges

`badge` can be used as part of links or buttons to provide a counter.

    <div class="badge-flex">
     <button class="btn btn-primary">Notifications
       <span class="badge text-bg-danger ms-2">4</span>
     </button>
     <button class="btn button-light-primary">Sale
       <span class="badge text-bg-danger rounded-pill ms-2">9</span>
     </button>
     <button class="btn border-dashed-primary">Instagram
       <span class="badge text-bg-danger ms-2">6</span>
     </button>
     <button class="btn btn-pill button-light-info txt-info">LinkedIn
       <span class="badge text-bg-info rounded-pill ms-2 txt-light">3</span>
     </button>
    </div>

##### Image Badges

Use`image-badges` class to set image sizes.

Primary Secondary Success Danger Warning Info Light Dark

    <div class="badge-spacing image-badges">
     <span class="badge common-align txt-primary rounded-pill badge-l-primary rounded-pill border border-primary">
       <img class="rounded-circle me-1" src="../assets/images/dashboard-9/user/5.png" alt="user">Primary
     </span>
     <span class="badge common-align txt-secondary rounded-pill badge-l-secondary rounded-pill border border-secondary">
       <img class="rounded-circle me-1" src="../assets/images/dashboard-9/user/2.png" alt="user">Secondary
     </span>
     <span class="badge common-align txt-success rounded-pill badge-l-success rounded-pill border border-success">
       <img class="rounded-circle me-1" src="../assets/images/dashboard-9/user/3.png" alt="user">Success
     </span>
     <span class="badge common-align txt-danger rounded-pill badge-l-danger rounded-pill border border-danger">
       <img class="rounded-circle me-1" src="../assets/images/dashboard-9/user/4.png" alt="user">Danger
     </span>
     <span class="badge common-align txt-warning rounded-pill badge-l-warning rounded-pill border border-warning">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/11.jpg" alt="user">Warning
     </span>
     <span class="badge common-align txt-info rounded-pill badge-l-info rounded-pill border border-info">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/4.jpg" alt="user">Info
     </span>
     <span class="badge common-align txt-light rounded-pill badge-l-light rounded-pill border border-light">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/10.jpg" alt="user">Light
     </span>
     <span class="badge common-align txt-dark rounded-pill badge-l-dark rounded-pill border border-dark">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/7.jpg" alt="user">Dark
     </span>
    </div>

##### Close Badges

Use`badge-l-*`classes to provide background-colors and `border-*` classes to provide border-colors.

Primary Secondary Success Danger Warning Info Light Dark

    <div class="badge-spacing image-badges">
     <span class="badge common-align txt-primary rounded-pill badge-l-primary rounded-pill border border-primary">Primary
       <a href="#!">
         <i class="ms-1 stroke-primary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-secondary rounded-pill badge-l-secondary rounded-pill border border-secondary">Secondary
       <a href="#!">
         <i class="ms-1 stroke-secondary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-success rounded-pill badge-l-success rounded-pill border border-success">Success
       <a href="#!">
         <i class="ms-1 stroke-success" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-danger rounded-pill badge-l-danger rounded-pill border border-danger">Danger
       <a href="#!">
         <i class="ms-1 stroke-danger" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-warning rounded-pill badge-l-warning rounded-pill border border-warning">Warning
       <a href="#!">
         <i class="ms-1 stroke-warning" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-info rounded-pill badge-l-info rounded-pill border border-info">Info
       <a href="#!">
         <i class="ms-1 stroke-info" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-light rounded-pill badge-l-light rounded-pill border border-light">Light
       <a href="#!">
         <i class="ms-1 stroke-light" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-dark rounded-pill badge-l-dark rounded-pill border border-dark">Dark
       <a href="#!">
         <i class="ms-1 stroke-dark" data-feather="x-circle"></i>
       </a>
     </span>
    </div>

##### Image with Close Badges

Use`badge-l-*` classes to provide background-color. and `vr` classes to partitions.

Primary Secondary Success Danger Warning Info Light Dark

    <div class="badge-spacing image-badges">
     <span class="badge common-align txt-primary rounded-pill badge-l-primary rounded-pill border border-primary">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/1.jpg" alt="user">Primary
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-primary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-secondary rounded-pill badge-l-secondary rounded-pill border border-secondary">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/2.jpg" alt="user">Secondary
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-secondary" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-success rounded-pill badge-l-success rounded-pill border border-success">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/3.jpg" alt="user">Success
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-success" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-danger rounded-pill badge-l-danger rounded-pill border border-danger">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/5.jpg" alt="user">Danger
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-danger" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-warning rounded-pill badge-l-warning rounded-pill border border-warning">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/6.jpg" alt="user">Warning
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-warning" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-info rounded-pill badge-l-info rounded-pill border border-info">
       <img class="rounded-circle me-1" src="../assets/images/dashboard/user/12.jpg" alt="user">Info
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-info" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-light rounded-pill badge-l-light rounded-pill border border-light">
       <img class="rounded-circle me-1" src="../assets/images/user/3.png" alt="user">Light
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-light" data-feather="x-circle"></i>
       </a>
     </span>
     <span class="badge common-align txt-dark rounded-pill badge-l-dark rounded-pill border border-dark">
       <img class="rounded-circle me-1" src="../assets/images/user/6.jpg" alt="user">Dark
       <span class="vr mx-2"></span>
       <a href="#!">
         <i class="stroke-dark" data-feather="x-circle"></i>
       </a>
     </span>
    </div>