Bootstrap 5 Framework

Alerts and Badges

13 min Lesson 27 of 40

Alerts and Badges in Bootstrap 5

Alerts provide contextual feedback messages for typical user actions, while badges are small count and labeling components. Both are essential for providing visual feedback to users.

Alert Styles and Variants

Bootstrap provides eight contextual alert styles for different types of messages:

<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
    A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
</div>
    

Alert Types:

.alert-success - Successful operations
.alert-info - Informational messages
.alert-warning - Warning messages
.alert-danger - Error messages
.alert-primary - Primary context

Alerts with Links and Icons

Enhance alerts with links and icons for better user interaction:

<!-- Alert with Link -->
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
    <a href="#" class="alert-link">Take this action</a>
</div>

<!-- Alert with Icon -->
<div class="alert alert-warning d-flex align-items-center" role="alert">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24">
        <use xlink:href="#exclamation-triangle-fill"/>
    </svg>
    <div>
        Warning! Please check your input data.
    </div>
</div>

<!-- Alert with Heading -->
<div class="alert alert-info" role="alert">
    <h4 class="alert-heading">Well done!</h4>
    <p>You successfully completed the registration process.</p>
    <hr>
    <p class="mb-0">Check your email to verify your account.</p>
</div>
    

Tip: Use .alert-link class on anchor tags within alerts to style them with matching colors for better integration.

Dismissible Alerts

Add a dismiss button to allow users to close alerts:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- Alert with JavaScript Control -->
<div class="alert alert-success alert-dismissible fade show" role="alert" id="myAlert">
    This is a dismissible alert!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<script>
// Dismiss alert programmatically
var alertElement = document.getElementById('myAlert');
var alert = new bootstrap.Alert(alertElement);
// alert.close(); // Close the alert
</script>
    

Dismissible Alert Requirements:

.alert-dismissible - Adds padding for close button
.fade .show - Enables smooth fade transition
.btn-close - Close button styling
data-bs-dismiss="alert" - Enables dismiss functionality

Basic Badges

Badges are small count indicators and labels:

<!-- Contextual Badges -->
<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-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

<!-- Badge in Button -->
<button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-secondary">4</span>
</button>

<!-- Badge in Heading -->
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
    

Badge Pills

Use rounded-pill utility class to create pill-shaped badges:

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

<!-- Pill Badge with Icon -->
<span class="badge rounded-pill bg-success">
    <i class="bi bi-check-circle"></i> Verified
</span>
    

Positioning Badges

Position badges on buttons, icons, and other elements:

<!-- Badge on Button -->
<button type="button" class="btn btn-primary 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>

<!-- Badge on Icon -->
<button type="button" class="btn btn-primary position-relative">
    <i class="bi bi-bell"></i>
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        5
        <span class="visually-hidden">notifications</span>
    </span>
</button>

<!-- Badge Dot Indicator -->
<button type="button" class="btn btn-primary position-relative">
    Profile
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
        <span class="visually-hidden">New alerts</span>
    </span>
</button>
    

Positioning Tips:

Use .position-relative on the parent element
Use .position-absolute on the badge
Use .translate-middle to center the badge
Use .visually-hidden for screen reader text

Badge Backgrounds

Use background utilities to customize badge colors:

<!-- Solid Background Badges -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>

<!-- Subtle Background Badges -->
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
    

Accessibility Warning: When using light colored badges (warning, info, light), add .text-dark to ensure proper contrast for accessibility.

Practice Exercise

Create a notification system that includes:

A success alert that can be dismissed
A warning alert with an icon and heading
A navigation bar with notification badges on buttons
A product list where each item shows a "New" or "Sale" badge
A dot indicator badge on a profile icon showing unread messages

Best Practices:

Use appropriate contextual colors for alert types
Always include the role="alert" attribute for accessibility
Keep alert messages concise and actionable
Use badges to show counts, not lengthy text
Ensure proper contrast between badge text and background
Include screen reader text for icon-only badges