Main Menu

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>