Loading...

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

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

Buy now !

#### 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="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>