Default Badges

Primary Secondary Warning Danger Info Success Red Yellow Green Indigo Purple Pink Light Dark

<span class="badge rounded-pill bg-primary">Primary</span>
        <span class="badge rounded-pill bg-secondary">Secondary</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-info">Info</span>
        <span class="badge rounded-pill bg-success">Success</span>
        <span class="badge rounded-pill bg-red">Red</span>
        <span class="badge rounded-pill bg-yellow">Yellow</span>
        <span class="badge rounded-pill bg-green">Green</span>
        <span class="badge rounded-pill bg-indigo">Indigo</span>
        <span class="badge rounded-pill bg-purple">Purple</span>
        <span class="badge rounded-pill bg-pink">Pink</span>
        <span class="badge rounded-pill bg-light text-default">Light</span>
        <span class="badge rounded-pill bg-dark text-white">Dark</span>

Square Badges

Primary Secondary Warning Danger Info Success Red Yellow Green Indigo Purple Pink Light Dark

<span class="badge bg-primary">Primary</span>
        <span class="badge bg-secondary">Secondary</span>
        <span class="badge bg-warning">Warning</span>
        <span class="badge bg-danger">Danger</span>
        <span class="badge bg-info">Info</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-red">Red</span>
        <span class="badge bg-yellow">Yellow</span>
        <span class="badge bg-green">Green</span>
        <span class="badge bg-indigo">Indigo</span>
        <span class="badge bg-purple">Purple</span>
        <span class="badge bg-pink">Pink</span>
        <span class="badge bg-light text-default">Light</span>
        <span class="badge bg-dark text-white">Dark</span>

Default Light Colored Badges

Primary Secondary Warning Danger Info Success Red Yellow Green Indigo Purple Pink Light Dark

<span class="badge rounded-pill bg-primary-transparent">Primary</span>
        <span class="badge rounded-pill bg-secondary-transparent">Secondary</span>
        <span class="badge rounded-pill bg-warning-transparent">Warning</span>
        <span class="badge rounded-pill bg-danger-transparent">Danger</span>
        <span class="badge rounded-pill bg-info-transparent">Info</span>
        <span class="badge rounded-pill bg-success-transparent">Success</span>
        <span class="badge rounded-pill bg-red-transparent">Red</span>
        <span class="badge rounded-pill bg-yellow-transparent">Yellow</span>
        <span class="badge rounded-pill bg-green-transparent">Green</span>
        <span class="badge rounded-pill bg-indigo-transparent">Indigo</span>
        <span class="badge rounded-pill bg-purple-transparent">Purple</span>
        <span class="badge rounded-pill bg-pink-transparent">Pink</span>
        <span class="badge rounded-pill bg-light text-default">Light</span>
        <span class="badge rounded-pill bg-dark-transparent text-white">Dark</span>

Square Light Colored Badges

Primary Secondary Warning Danger Info Success Red Yellow Green Indigo Purple Pink Light Dark

<span class="badge bg-primary-transparent">Primary</span>
        <span class="badge bg-secondary-transparent">Secondary</span>
        <span class="badge bg-warning-transparent">Warning</span>
        <span class="badge bg-danger-transparent">Danger</span>
        <span class="badge bg-info-transparent">Info</span>
        <span class="badge bg-success-transparent">Success</span>
        <span class="badge bg-red-transparent">Red</span>
        <span class="badge bg-yellow-transparent">Yellow</span>
        <span class="badge bg-green-transparent">Green</span>
        <span class="badge bg-indigo-transparent">Indigo</span>
        <span class="badge bg-purple-transparent">Purple</span>
        <span class="badge bg-pink-transparent">Pink</span>
        <span class="badge bg-light text-default">Light</span>
        <span class="badge bg-dark-transparent text-white">Dark</span>

Outline Badges

Primary Secondary Warning Danger Info Success Red Yellow Green Indigo Purple Pink Light Dark

<span class="badge rounded-pill bg-outline-primary text-primay">Primary</span>
        <span class="badge rounded-pill bg-outline-secondary text-secondary">Secondary</span>
        <span class="badge rounded-pill bg-outline-warning text-warning">Warning</span>
        <span class="badge rounded-pill bg-outline-danger text-danger">Danger</span>
        <span class="badge rounded-pill bg-outline-info text-info">Info</span>
        <span class="badge rounded-pill bg-outline-success text-success">Success</span>
        <span class="badge rounded-pill bg-outline-red text-red">Red</span>
        <span class="badge rounded-pill bg-outline-yellow text-yellow">Yellow</span>
        <span class="badge rounded-pill bg-outline-green text-green">Green</span>
        <span class="badge rounded-pill bg-outline-indigo text-indigo">Indigo</span>
        <span class="badge rounded-pill bg-outline-purple text-purple">Purple</span>
        <span class="badge rounded-pill bg-outline-pink text-pink">Pink</span>
        <span class="badge rounded-pill bg-outline-light text-default">Light</span>
        <span class="badge rounded-pill bg-outline-dark text-default">Dark</span>

Square Outline Badges

Primary Secondary Warning Danger Info Success Red Yellow Green Indigo Purple Pink Light Dark

<span class="badge bg-outline-primary text-primary">Primary</span>
        <span class="badge bg-outline-secondary text-secondary">Secondary</span>
        <span class="badge bg-outline-warning text-warning">Warning</span>
        <span class="badge bg-outline-danger text-danger">Danger</span>
        <span class="badge bg-outline-info text-info">Info</span>
        <span class="badge bg-outline-success text-success">Success</span>
        <span class="badge bg-outline-red text-red">Red</span>
        <span class="badge bg-outline-yellow text-yellow">Yellow</span>
        <span class="badge bg-outline-green text-green">Green</span>
        <span class="badge bg-outline-indigo text-indigo">Indigo</span>
        <span class="badge bg-outline-purple text-purple">Purple</span>
        <span class="badge bg-outline-pink text-pink">Pink</span>
        <span class="badge bg-outline-light text-default">Light</span>
        <span class="badge bg-outline-dark text-default">Dark</span>

Badges with Max-Width

This content is a little bit longer. This content is a little bit longer. This content is a little bit longer. This content is a little bit longer. This content is a little bit longer. This content is a little bit longer.

<span class="badge badge-max-w d-inline-block text-truncate bg-primary-transparent">This content is a little bit longer.</span>
            <span class="badge badge-max-w d-inline-block text-truncate bg-danger-transparent">This content is a little bit longer.</span>
            <span class="badge badge-max-w d-inline-block text-truncate bg-warning-transparent">This content is a little bit longer.</span>
            <span class="badge badge-max-w d-inline-block text-truncate bg-orange-transparent">This content is a little bit longer.</span>
            <span class="badge badge-max-w d-inline-block text-truncate bg-success-transparent">This content is a little bit longer.</span>
            <span class="badge badge-max-w d-inline-block text-truncate bg-info-transparent">This content is a little bit longer.</span>

Buttons With Badges

<button type="button" class="btn btn-primary my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill bg-secondary">4</span>
        </button>
        <button type="button" class="btn btn-secondary my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill bg-primary">7</span>
        </button>
        <button type="button" class="btn btn-success my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill bg-danger">12</span>
        </button>
        <button type="button" class="btn btn-info my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill bg-warning">32</span>
        </button>

Outline Button Badges

<button type="button" class="btn btn-outline-primary my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill">4</span>
        </button>
        <button type="button" class="btn btn-outline-secondary my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill">7</span>
        </button>
        <button type="button" class="btn btn-outline-success my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill">12</span>
        </button>
        <button type="button" class="btn btn-outline-info my-1 me-2">
            Notifications <span class="badge ms-2 rounded-pill">32</span>
        </button>

Badges with Remove Buton

Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

Badge With Indicator

Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

Headings

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>Example heading <span class="badge bg-primary">New</span></h6>

Badge With Position

<button type="button" class="btn btn-outline-light btn-lg position-relative d-block ">
            <i class="ti ti-bell text-xl"></i>
            <span
                class="position-absolute top-0 end-0 translate-middle badge rounded-pill bg-danger">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>
        <button type="button" class="btn btn-outline-light btn-lg position-relative d-block mt-4">
            <i class="ti ti-bell text-xl"></i>
            <span
                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>
        <button type="button" class="btn btn-outline-light btn-lg position-relative d-block mt-4">
            <i class="ti ti-bell text-xl"></i>
            <span
                class="position-absolute top-100 end-0 translate-middle badge rounded-pill bg-danger">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>
        <button type="button" class="btn btn-outline-light btn-lg position-relative d-block mt-4">
            <i class="ti ti-bell text-xl"></i>
            <span
                class="position-absolute top-100 start-100 translate-middle badge rounded-pill bg-danger">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>

Badge With Profile

<span class="avatar">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
            <span class="position-absolute top-0 start-0 translate-middle p-1 bg-success border border-light rounded-circle"> 
            <span class="visually-hidden">New alerts</span> 
        </span>
        </span>
        <span class="avatar d-block mt-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
            <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle"> 
                <span class="visually-hidden">New alerts</span> 
            </span>
        </span>
        <span class="avatar d-block mt-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
            <span class="position-absolute top-100 start-0 translate-middle p-1 bg-success border border-light rounded-circle"> 
                <span class="visually-hidden">New alerts</span> 
            </span>
        </span>
        <span class="avatar d-block mt-3">
            <img src="https://laravelui.spruko.com/synto/build/assets/img/users/1.jpg" alt="img">
                <span class="position-absolute top-100 start-100 translate-middle p-1 bg-success border border-light rounded-circle"> 
                <span class="visually-hidden">New alerts</span> 
            </span>
        </span>

Customized Badges

Hot

13.2k

Inbox 32

<span class="badge bg-outline-secondary custom-badge fs-15 d-inline-flex align-items-center"><i class="ti ti-flame me-1"></i>Hot</span>
        <span class="icon-badge">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
            <span class="badge rounded-pill bg-success">14</span>
        </span>
        <span class="badge border bg-light text-default custom-badge"><i class="fe fe-eye me-2 d-inline-block"></i>13.2k</span>
        <span class="text-badge">
            <span class="text fs-18">Inbox</span>
            <span class="badge rounded-pill bg-success">32</span>
        </span>

Switcher

Badges

Example heading New