Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Badge

Lorem ipsum dolor sit amet

Heading Styles

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

    <!-- Heading Styles -->
    <h1>Example heading <span class="badge bg-primary rounded-1">New</span></h1>
    <hr>
    <h2>Example heading <span class="badge bg-primary rounded-1">New</span></h2>
    <hr>
    <h3>Example heading <span class="badge bg-primary rounded-1">New</span></h3>
    <hr>
    <h4>Example heading <span class="badge bg-primary rounded-1">New</span></h4>
    <hr>
    <h5>Example heading <span class="badge bg-primary rounded-1">New</span></h5>
    <hr>
    <h6>Example heading <span class="badge bg-primary rounded-1">New</span></h6>
Colored Badge
Primary Danger Secondary Info Success Warning Light Dark 

    <!-- Colored Badges -->
    <span class="badge bg-primary text-white mb-1">Primary</span>
    <span class="badge text-bg-danger mb-1">Danger</span>
    <span class="badge bg-secondary text-gray-800 mb-1">Secondary</span>
    <span class="badge text-bg-info mb-1">Info</span>
    <span class="badge text-bg-success mb-1">Success</span>
    <span class="badge text-bg-warning mb-1">Warning</span>
    <span class="badge text-bg-light mb-1">Light</span>
    <span class="badge text-bg-dark mb-1">Dark</span>
Badges with Icon
Primary Secondary Success Danger Warning Info Light Dark 

    <!-- Badges with Icon -->
    <span class="badge text-bg-primary mb-1"><i class="bi bi-star"></i> Primary</span>
    <span class="badge text-bg-secondary mb-1"><i class="bi bi-star"></i> Secondary</span>
    <span class="badge text-bg-success mb-1"><i class="bi bi-star"></i> Success</span>
    <span class="badge text-bg-danger mb-1"><i class="bi bi-star"></i> Danger</span>
    <span class="badge text-bg-warning mb-1"><i class="bi bi-star"></i> Warning</span>
    <span class="badge text-bg-info mb-1"><i class="bi bi-star"></i> Info</span>
    <span class="badge text-bg-light mb-1"><i class="bi bi-star"></i> Light</span>
    <span class="badge text-bg-dark mb-1"><i class="bi bi-star"></i> Dark</span>
Pill Badges
Primary Secondary Success Danger Warning Info Light Dark 

    <!-- Pill Badges -->
    <span class="badge rounded-pill text-bg-primary mb-1">Primary</span>
    <span class="badge rounded-pill text-bg-secondary mb-1">Secondary</span>
    <span class="badge rounded-pill text-bg-success mb-1">Success</span>
    <span class="badge rounded-pill text-bg-danger mb-1">Danger</span>
    <span class="badge rounded-pill text-bg-warning mb-1">Warning</span>
    <span class="badge rounded-pill text-bg-info mb-1">Info</span>
    <span class="badge rounded-pill text-bg-light mb-1">Light</span>
    <span class="badge rounded-pill text-bg-dark mb-1">Dark</span>
Badges with Button

    <!-- Badges with Button -->
    <!-- Button + badge -->
    <button type="button" class="btn btn-primary">
        Notifications <span class="badge text-bg-light ms-1">4</span>
    </button>
    
    <!-- Pill button + pill badge -->
    <button type="button" class="btn rounded-pill btn-dark">
        Profile <span class="badge rounded-pill bg-warning ms-1">9</span>
    </button>
    
    <!-- Outline button + badge -->
    <button type="button" class="btn btn-outline-danger">
        Messages <span class="badge bg-success ms-1">18</span>
    </button>