##### Default Badges

Bootstrap badges are created using the `.badge` class and can be customized with color classes like `.bg-primary`, `.bg-secondary`, and more to match your design requirements.

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>

##### Pill-Shaped Badge

To create a badge with a primary background and a rounded pill shape, use the following Bootstrap classes: `.badge`, `.bg-primary`, and `.rounded-pill`.

Primary Secondary Success Info Warning Danger Dark Light

    <span class="badge bg-primary rounded-pill">Primary</span>
    <span class="badge bg-secondary rounded-pill">Secondary</span>
    <span class="badge bg-success rounded-pill">Success</span>
    <span class="badge bg-info rounded-pill">Info</span>
    <span class="badge bg-warning rounded-pill">Warning</span>
    <span class="badge bg-danger rounded-pill">Danger</span>
    <span class="badge bg-dark rounded-pill">Dark</span>
    <span class="badge bg-light rounded-pill text-body">Light</span>

##### Light Badges

To create Light badges in Bootstrap, utilize the `.badge` class. You can enhance the appearance of your badges by applying color classes such as `.bg-primary-subtle`, `.badge-secondary-subtle` etc.

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

##### Pill-Shaped Light Badges

To create a stylish badge with a primary color background and a rounded pill shape, you can utilize the `.badge`, `.bg-primary-subtle`, and `.rounded-pill` classes.

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>

##### Outline Badges

Use default badges in Bootstrap with the `.badge` class. Add color classes like `.border`, `.border-*`, etc., to style the badge.

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>

##### Pill-Shaped Outline Badges

Create a badge with a primary background and rounded pill shape using `.badge`, `.border`, `.border-*` and `.rounded-pill` classes.

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>

##### Button Badges

Add a badge to a Bootstrap button by placing a `<span class="badge">` inside the button. This is great for showing counts or notifications on the button.

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

##### Outline Button Badges

Add a badge to a Bootstrap button by placing a `<span class="badge">` inside the button. This is great for showing counts or notifications on the button.

                                            <button type="button" class="btn btn-outline-primary">
        Notifications <span class="badge bg-primary ms-1">4</span>
    </button>
    <button type="button" class="btn btn-outline-danger">
        Notifications <span class="badge bg-danger rounded-pill ms-1">2</span>
    </button>
    <button type="button" class="btn btn-outline-success position-relative">
        Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">7
        <span class="visually-hidden">New</span></span>
    </button>
    <button type="button" class="btn btn-outline-info position-relative">
        Notifications <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">New
        <span class="visually-hidden">New</span></span>
    </button>

##### Button Position Badges

Position badges on Bootstrap buttons by placing a `<span class="badge position-absolute">` inside the button. Use utility classes like `.top-0` and `.end-0` to adjust the badge position.

    <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">+9 <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-subtle 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 icon-btn rounded">
        <i class="ri-mail-fill"></i>
        <span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle 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 icon-btn rounded-circle">
        <i class="ri-notification-4-fill"></i>
    </button>

    <button type="button" class="btn btn-light position-relative p-0 icon-btn rounded-circle">
        <i class="ri-menu-line"></i>
        <span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
    </button>

##### Badge with Icons

Icon badges can be used to represent actions, statuses, or notifications visually. Combine Bootstrap's `.badge` class with an `<i>` icon element for a modern UI.

Alerts Messages Approved Info Warnings Errors Settings unread messages

    <span class="badge bg-primary"><i class="ri-notification-3-line"></i> Alerts</span>
    <span class="badge bg-secondary-subtle text-secondary"><i class="ri-mail-line"></i> Messages</span>
    <span class="badge bg-outline-success text-success border border-success"><i class="ri-check-line"></i> Approved</span>
    <span class="badge bg-info rounded-pill"><i class="ri-information-line"></i> Info</span>
    <span class="badge bg-warning-subtle text-warning rounded-pill"><i class="ri-error-warning-line"></i> Warnings</span>
    <span class="badge bg-outline-danger-subtle text-danger border border-danger rounded-pill"><i class="ri-close-line"></i> Errors</span>
    <span class="badge bg-light text-body position-relative">
        <i class="ri-settings-4-line"></i> Settings
        <span class="position-absolute top-0 start-100 translate-middle badge border border-light-subtle rounded-circle bg-primary p-1">
            <span class="visually-hidden">unread messages</span>
        </span>
    </span>

##### Badges with Heading

Add badges to headings by placing a `<span class="badge">` next to the heading text. This is useful for highlighting important information or counts.

# Example heading New

    <h1>Example heading <span class="badge bg-primary">New</span></h1>
    <h2>Example heading <span class="badge bg-primary">New</span></h2>
    <h3>Example heading <span class="badge bg-primary">New</span></h3>
    <h4>Example heading <span class="badge bg-primary">New</span></h4>
    <h5>Example heading <span class="badge bg-primary">New</span></h5>
    <h6 class="mb-0">Example heading <span class="badge bg-primary">New</span></h6>

##### Square Badges

5 5 5 5 5 5 5 5

Theme color Archive just adding class`.badge`

5 5 5 5 5 5 5 5

Use theme colors in badges by simply adding the`.badge`

    <span class="badge border border-primary bg-primary">5</span>
    <span class="badge border border-secondary bg-secondary">5</span>
    <span class="badge border border-success bg-success">5</span>
    <span class="badge border border-info bg-info">5</span>
    <span class="badge border border-warning bg-warning">5</span>
    <span class="badge border border-danger bg-danger">5</span>
    <span class="badge border border-dark bg-dark">5</span>
    <span class="badge border border-light bg-light text-light-emphasis">5</span>
    <span class="badge rounded-pill text-primary bg-primary-subtle">5</span>
    <span class="badge rounded-pill text-secondary bg-secondary-subtle">5</span>
    <span class="badge rounded-pill text-success bg-success-subtle">5</span>
    <span class="badge rounded-pill text-info bg-info-subtle">5</span>
    <span class="badge rounded-pill text-warning bg-warning-subtle">5</span>
    <span class="badge rounded-pill text-danger bg-danger-subtle">5</span>
    <span class="badge rounded-pill text-dark bg-dark-subtle">5</span>
    <span class="badge rounded-pill text-dark bg-light-subtle">5</span>
    <span class="badge border text-primary border-primary-subtle"><i class="ri-star-line"></i></span>
    <span class="badge border text-secondary border-secondary-subtle"><i class="ri-mail-line"></i></span>
    <span class="badge border text-success border-success-subtle"><i class="ri-check-line"></i></span>
    <span class="badge border text-info border-info-subtle"><i class="ri-information-line"></i></span>
    <span class="badge border text-warning border-warning-subtle"><i class="ri-error-warning-line"></i></span>
    <span class="badge border text-danger border-danger-subtle"><i class="ri-close-line"></i></span>
    <span class="badge border text-dark border-dark-subtle"><i class="ri-lock-line"></i></span>
    <span class="badge border text-dark border-light-subtle"><i class="ri-settings-4-line"></i></span>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark