Learning UIUX - Courses Education Bootstrap 5 Mobile HTML template - Admin Dashboard

Standard Badges

Example heading New


            <p class="h1">Example heading <span class="badge text-bg-primary">New</span></p>
            <p class="h2">Example heading <span class="badge text-bg-secondary">New</span></p>
            <p class="h3">Example heading <span class="badge text-bg-success">New</span></p>
            <p class="h4">Example heading <span class="badge text-bg-info">New</span></p>
            <p class="h5">Example heading <span class="badge text-bg-warning">New</span></p>
            <p class="h6">Example heading <span class="badge text-bg-danger">New</span></p>

Badges in button


            <button type="button" class="btn btn-theme me-2">Notifications <span class="badge text-bg-warning">4</span> </button>
            <button type="button" class="btn btn-theme me-2">Pages <span class="badge text-bg-info">New</span></button>

Position Badges


            <button type="button" class="btn btn-theme position-relative">
            Inbox
            <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>

Badges inline

Theme Accent Primary Secondary Success Danger Warning Info Light Dark


            <span class="badge text-bg-theme-1">Theme</span>
            <span class=" badge text-bg-theme-accent-1">Accent</span>
            <span class="badge text-bg-primary">Primary</span>
            <span class="badge text-bg-secondary">Secondary</span>
            <span class="badge text-bg-success">Success</span>
            <span class="badge text-bg-danger">Danger</span>
            <span class="badge text-bg-warning">Warning</span>
            <span class="badge text-bg-info">Info</span>
            <span class="badge text-bg-light">Light</span>
            <span class="badge text-bg-dark">Dark</span>

Badges inline

Theme Accent Primary Secondary Success Danger Warning Info Light Dark


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

Badges Lights

Theme Accent Primary Secondary Success Danger Warning Info Light Dark


            <span class="badge badge-light text-bg-theme-1">Theme</span>
            <span class=" badge badge-light text-bg-theme-accent-1">Accent</span>
            <span class="badge badge-light text-bg-primary">Primary</span>
            <span class="badge badge-light text-bg-secondary">Secondary</span>
            <span class="badge badge-light text-bg-success">Success</span>
            <span class="badge badge-light text-bg-danger">Danger</span>
            <span class="badge badge-light text-bg-warning">Warning</span>
            <span class="badge badge-light text-bg-info">Info</span>
            <span class="badge badge-light text-bg-light">Light</span>
            <span class="badge badge-light text-bg-dark">Dark</span>