Tag & Pills

  • 3
    Notifications
    • user

      Emay Walter liked your post

      10 minutes ago
    • user

      Allie Gratershared your post

      5 hours ago
    • user

      Colin Sikcommented on your post

      yesterday
    • Check all
  • 2
    user
    Jane Cooper

    active

    • user

      Hello.how are you?

    • user

      Hi, i'm fine.what about you?

    • user

      I am facing js issue can you help me?

    • user

      Sure, i will help you.

  • 2
    Cart
    empty
    Oops! Your cart empty!!!
  • profile

    Wade Warren

    UI Designer
user

Wade Warren

UI Designer

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">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">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="badge-heading">Badge Heading 1<span class="badge badge-primary">Latest</span></h1>
<h2 class="badge-heading">Badge Heading 2<span class="badge badge-secondary">Trending</span></h2>
<h3 class="badge-heading">Badge Heading 3<span class="badge badge-success">Checkout</span></h3>
<h4 class="badge-heading">Badge Heading 4<span class="badge badge-warning">Inbox</span></h4>
<h5 class="badge-heading">Badge Heading 5<span class="badge badge-danger">Login</span></h5>
<h6 class="badge-heading pb-0">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>

Copyright 2024 © Yuri theme by pixelstrap

  • English
    English (US)
    Deutsch
    Español
    Français
    Português (BR)
    简体中文
    لعربية (ae)
Select Region