Badges

  1. Components
  2. Badges

Default Badges

Use the badge class to set a default badge.

Primary Secondary Success Info Warning Danger Dark Light 
<span class="badge bg-primary">Primary</span>

<span class="badge bg-secondary">Secondary</span>

<span class="badge bg-success">Success</span>

<span class="badge bg-info">Info</span>

<span class="badge bg-warning">Warning</span>

<span class="badge bg-danger">Danger</span>

<span class="badge bg-dark">Dark</span>

<span class="badge bg-light text-body">Light</span>

Soft Badges

Use the bg-*-subtle text-* class with the below-mentioned variation to create a softer badge.

Primary Secondary Success Info Warning Danger Dark Light 
<span class="badge bg-primary-subtle text-primary">Primary</span>

<span class="badge bg-secondary-subtle text-secondary">Secondary</span>

<span class="badge bg-success-subtle text-success">Success</span>

<span class="badge bg-info-subtle text-info">Info</span>

<span class="badge bg-warning-subtle text-warning">Warning</span>

<span class="badge bg-danger-subtle text-danger">Danger</span>

<span class="badge bg-dark-subtle text-body">Dark</span>

<span class="badge bg-light-subtle text-body">Light</span>

Outline Badges

Use the border, border-* text-* class with the below-mentioned variation to create a badge with the outline.

Primary Secondary Success Info Warning Danger Dark Light 
<span class="badge border border-primary text-primary">Primary</span>

<span class="badge border border-secondary text-secondary">Secondary</span>

<span class="badge border border-success text-success">Success</span>

<span class="badge border border-info text-info">Info</span>

<span class="badge border border-warning text-warning">Warning</span>

<span class="badge border border-danger text-danger">Danger</span>

<span class="badge border border-dark text-body">Dark</span>

<span class="badge border border-light text-body">Light</span>

Rounded Pill Badges

Use the rounded-pill class to make badges more rounded with a larger border-radius.

Primary Secondary Success Info Warning Danger Dark Light 
<span class="badge rounded-pill bg-primary">Primary</span>

<span class="badge rounded-pill bg-secondary">Secondary</span>

<span class="badge rounded-pill bg-success">Success</span>

<span class="badge rounded-pill bg-info">Info</span>

<span class="badge rounded-pill bg-warning">Warning</span>

<span class="badge rounded-pill bg-danger">Danger</span>

<span class="badge rounded-pill bg-dark">Dark</span>

<span class="badge rounded-pill bg-light text-body">Light</span>

Rounded Pill Badges with soft effect

Use the rounded-pill bg-*-subtle text-* class with the below-mentioned variation to create a badge more rounded with a soft background.

Primary Secondary Success Info Warning Danger Dark Light 
<span class="badge rounded-pill bg-primary-subtle text-primary">Primary</span>

<span class="badge rounded-pill bg-secondary-subtle text-secondary">Secondary</span>

<span class="badge rounded-pill bg-success-subtle text-success">Success</span>

<span class="badge rounded-pill bg-info-subtle text-info">Info</span>

<span class="badge rounded-pill bg-warning-subtle text-warning">Warning</span>

<span class="badge rounded-pill bg-danger-subtle text-danger">Danger</span>

<span class="badge rounded-pill bg-dark-subtle text-body">Dark</span>

<span class="badge rounded-pill bg-light-subtle text-body">Light</span>

Soft Border Badges

Use the badge-border and bg-*-subtle text-* with below mentioned modifier classes to make badges with border & soft background.

Primary Secondary Success Danger Warning Info Dark Light 
<span class="badge bg-primary-subtle text-primary badge-border">Primary</span>

<span class="badge bg-secondary-subtle text-secondary badge-border">Secondary</span>

<span class="badge bg-success-subtle text-success badge-border">Success</span>

<span class="badge bg-info-subtle text-info badge-border">Info</span>

<span class="badge bg-warning-subtle text-warning badge-border">Warning</span>

<span class="badge bg-danger-subtle text-danger badge-border">Danger</span>

<span class="badge bg-dark-subtle text-body badge-border">Dark</span>

<span class="badge bg-light-subtle text-body badge-border">Light</span>

Outline Pill Badges

Use the rounded-pill border, border-* text-* class with the below-mentioned variation to create a outline Pill badge.

Primary Secondary Success Info Warning Danger Dark Light 
<span class="badge rounded-pill border border-primary text-primary">Primary</span>

<span class="badge rounded-pill border border-secondary text-secondary">Secondary</span>

<span class="badge rounded-pill border border-success text-success">Success</span>

<span class="badge rounded-pill border border-info text-info">Info</span>

<span class="badge rounded-pill border border-warning text-warning">Warning</span>

<span class="badge rounded-pill border border-danger text-danger">Danger</span>

<span class="badge rounded-pill border border-dark text-body">Dark</span>

<span class="badge rounded-pill border border-light text-body">Light</span>

Label Badges

Use the badge-label class to create a badge with the label.

Primary Secondary Success Danger Warning Info Dark Light 
<span class="badge badge-label bg-primary"><i class="mdi mdi-circle-medium"></i> Primary</span>

<span class="badge badge-label bg-secondary"><i class="mdi mdi-circle-medium"></i> Secondary</span>

<span class="badge badge-label bg-success"><i class="mdi mdi-circle-medium"></i> Success</span>

<span class="badge badge-label bg-danger"><i class="mdi mdi-circle-medium"></i> Danger</span>

<span class="badge badge-label bg-warning"><i class="mdi mdi-circle-medium"></i> Warning</span>

<span class="badge badge-label bg-info"><i class="mdi mdi-circle-medium"></i> Info</span>

<span class="badge badge-label bg-dark"><i class="mdi mdi-circle-medium"></i> Dark</span>\

<span class="badge badge-label bg-light"><i class="mdi mdi-circle-medium"></i> Light</span>

Gradient Badges

Use the badge-gradient-* class to create a gradient styled badge.

Primary Secondary Success Danger Warning Info Dark 
<span class="badge badge-gradient-primary">Primary</span>

<span class="badge badge-gradient-secondary">Secondary</span>

<span class="badge badge-gradient-success">Success</span>

<span class="badge badge-gradient-danger">Danger</span>

<span class="badge badge-gradient-warning">Warning</span>

<span class="badge badge-gradient-info">Info</span>

<span class="badge badge-gradient-dark">Dark</span>

Button Position Badges

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

<button type="button" class="btn btn-primary position-relative">
    Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-light position-relative">
    Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-primary position-relative p-0 avatar-xs rounded">
    <span class="avatar-title bg-transparent">
        <i class="bx bxs-envelope"></i>
    </span>
    <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-light position-relative p-0 avatar-xs rounded-circle">
    <span class="avatar-title bg-transparent text-reset">
        <i class="bx bxs-bell"></i>
    </span>
</button>

<button type="button" class="btn btn-light position-relative p-0 avatar-xs rounded-circle">
    <span class="avatar-title bg-transparent text-reset">
        <i class="bx bx-menu"></i>
    </span>
    <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</button>

Badges With Button

Badges can be used as part of buttons to provide a counter.

<button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-success ms-1">4</span>
</button>

<button type="button" class="btn btn-success">
    Messages <span class="badge bg-danger ms-1">2</span>
</button>

<button type="button" class="btn btn-outline-secondary">
    Draft <span class="badge bg-success ms-1">2</span>
</button>

Badges with Heading

Example of the badge used in the HTML Heading.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<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>
ASENSO TURISMO

Mission
To inspire and connect travelers by showcasing the wonders of every destination, fostering sustainable tourism, and creating meaningful experiences that enrich both the traveler and the local communities.

Vision
To become a leading platform for tourism, empowering travelers to explore the world with ease while promoting cultural appreciation, environmental responsibility, and economic growth in every destination.

Quick Links
Web Pages
Support

© Province of Misamis Occidental