#### Badges

#### Default Badges

Show Code

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">Light</span>

#### Soft Badges

Show Code

Use the `badge-soft-` class with the below-mentioned variation to create a softer badge.

Primary Secondary Success Info Warning Danger Dark Light

    <span class="badge badge-soft-primary">Primary</span>

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

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

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

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

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

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

    <span class="badge badge-soft-light">Light</span>

#### Outline Badges

Show Code

Use the `badge-outline-` class with the below-mentioned variation to create a badge with the outline.

Primary Secondary Success Info Warning Danger Dark Light

    <span class="badge badge-outline-primary">Primary</span>

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

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

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

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

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

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

    <span class="badge badge-outline-light">Light</span>

#### Rounded Pill Badges

Show Code

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">Light</span>

#### Rounded Pill Badges with soft effect

Show Code

Use the `rounded-pill badge-soft-` 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 badge-soft-primary">Primary</span>

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

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

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

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

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

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

    <span class="badge rounded-pill badge-soft-light">Light</span>

#### Soft Border Badges

Show Code

Use the `badge-border` and `badge-soft-` with below mentioned modifier classes to make badges with border & soft backgorund.

Primary Secondary Success Danger Warning Info Dark Light

    <span class="badge badge-soft-primary badge-border">Primary</span>

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

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

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

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

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

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

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

#### Outline Pill Badges

Show Code

Use the `rounded-pill badge-outline-` 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 badge-outline-primary">Primary</span>

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

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

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

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

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

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

    <span class="badge rounded-pill badge-outline-light">Light</span>

#### Label Badges

Show Code

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

Show Code

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

Show Code

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

Show Code

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

Show Code

Example of the badge used in the HTML Heading.

# Example heading New

    <h1>Example heading <span class="badge bg-secondary">New</span></h1>

    <h2>Example heading <span class="badge bg-secondary">New</span></h2>

    <h3>Example heading <span class="badge bg-secondary">New</span></h3>

    <h4>Example heading <span class="badge bg-secondary">New</span></h4>

    <h5>Example heading <span class="badge bg-secondary">New</span></h5>

    <h6>Example heading <span class="badge bg-secondary">New</span></h6>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark