Tag & Pills

4
Notifications
- Daily offer added
  
  User-only offer added
- Product Review
  
  Changed to a workflow
- Return Products
  
  52 items were returned
- Recently Paid
  
  Card payment of $343
Bookmark

Forms

Profile

Tables

Add Bookmark
Back
3
Messages
- Hackett Yessenia
  
  Hello Miss...😊
  
  2 hours
- schneider Adan
  
  Wishing You a Happy Birthday Dear.. 🥳🎊
  
  3 hours
- Mahdi Gholizadeh
  
  Hello Dear!! This Theme Is Very beautiful
  
  5 hours
- View all
Cart
- Furniture Chair for Home
  
  $500
- Furniture Table for Office
  
  $500.00
- Order Total : $1000.00
- View Cart Checkout
Alen Miller
UI Designer
- Account
- Inbox
- Taskboard
- Settings
- Log out

Badges Contextual Variations

Use badge class to make more badges.

PrimarySecondarySuccessInfoWarningDangerLightDark

<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.

PrimarySecondarySuccessInfoWarningDangerLightDark

<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-pillclass to make badges with background (badge-*) more rounded with a larger border-radius.

PrimarySecondarySuccessInfoWarningDangerLightDark

<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.

PrimarySecondarySuccessInfoWarningDangerLightDark

<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.

12345678

<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 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 fa-linkedin"></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 fa-wechat"></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 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>

Tag & Pills

Daily offer added

Product Review

Return Products

Recently Paid

Error Page

Authentication

Coming Soon

Email templates

Badges Contextual Variations

Badges Outline Contextual Variations

Pill Contextual Variations

Pill Outline Variations

Number of Badges

Number of Pill Badges

Badge Tag with Icons

Rounded Pills with Icons

Badge Headings

Example heading New