Bootstrap Alerts - Complete Guide with Examples

What are Bootstrap Alerts?

Alerts are contextual feedback messages that display important information to users without interrupting their workflow. They come in different colors based on the message type (success, error, warning, info, etc.).

1. Basic Alerts

The simplest form of alerts using contextual classes.

<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>

Output Preview: Colored boxes with text, each with a distinct background and border color.

2. Dismissible Alerts

Add a close button to allow users to dismiss the alert.

<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>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Your profile has been updated successfully!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Key Components:

.alert-dismissible - Adds extra padding for the close button
.fade .show - Adds animation when dismissing
data-bs-dismiss="alert" - Bootstrap's JavaScript trigger

3. Alerts with Links

Add action links inside alerts using the .alert-link class.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<div class="alert alert-success" role="alert">
  Success! <a href="#" class="alert-link">View your dashboard</a> to see the changes.
</div>

<div class="alert alert-danger" role="alert">
  Something went wrong. <a href="#" class="alert-link">Contact support</a> for assistance.
</div>

Note: .alert-link adds bold text and matching color to the link for better contrast.

4. Alerts with Icons (Using Bootstrap Icons)

Enhance alerts by adding icons for better visual communication.

<!-- Include Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<div class="alert alert-success d-flex align-items-center" role="alert">
  <i class="bi bi-check-circle-fill me-2"></i>
  <div>
    Your payment was processed successfully!
  </div>
</div>

<div class="alert alert-danger d-flex align-items-center" role="alert">
  <i class="bi bi-exclamation-triangle-fill me-2"></i>
  <div>
    Failed to save your changes. Please try again.
  </div>
</div>

<div class="alert alert-info d-flex align-items-center" role="alert">
  <i class="bi bi-info-circle-fill me-2"></i>
  <div>
    A new version of the app is available. <a href="#" class="alert-link">Update now</a>
  </div>
</div>

<div class="alert alert-warning d-flex align-items-center" role="alert">
  <i class="bi bi-exclamation-diamond-fill me-2"></i>
  <div>
    Your session will expire in 5 minutes.
  </div>
</div>

Popular icon choices:

Success: bi-check-circle-fill
Danger: bi-exclamation-triangle-fill
Warning: bi-exclamation-diamond-fill
Info: bi-info-circle-fill
Primary: bi-star-fill

5. Rich Content Alerts

Add headings, paragraphs, and lists inside alerts.

<div class="alert alert-primary" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Account Created!</h4>
  <p>Your account has been successfully created. You can now:</p>
  <ul>
    <li>Log in to your dashboard</li>
    <li>Update your profile information</li>
    <li>Start using our services</li>
  </ul>
  <hr>
  <p class="mb-0">A verification email has been sent to your inbox.</p>
</div>

6. Live Demo: JavaScript Alert Creation

Create alerts dynamically with JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Bootstrap Alerts</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container py-4">
  <h1>Dynamic Alert Demo</h1>
  
  <div id="alertContainer"></div>
  
  <div class="mb-3">
    <button class="btn btn-success" onclick="showSuccess()">Show Success Alert</button>
    <button class="btn btn-danger" onclick="showError()">Show Error Alert</button>
    <button class="btn btn-info" onclick="showInfo()">Show Info Alert</button>
  </div>

  <script>
    function showAlert(message, type) {
      const alertContainer = document.getElementById('alertContainer');
      const alertDiv = document.createElement('div');
      alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
      alertDiv.role = 'alert';
      alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      `;
      alertContainer.appendChild(alertDiv);
      
      // Auto-dismiss after 5 seconds
      setTimeout(() => {
        alertDiv.remove();
      }, 5000);
    }
    
    function showSuccess() {
      showAlert('Operation completed successfully!', 'success');
    }
    
    function showError() {
      showAlert('An error occurred. Please try again.', 'danger');
    }
    
    function showInfo() {
      showAlert('New updates are available.', 'info');
    }
  </script>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. Form Validation Alerts

Display alerts when validating forms.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation with Alerts</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container py-4">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <h2>Contact Form</h2>
      
      <div id="formAlert" style="display: none;"></div>
      
      <form id="contactForm">
        <div class="mb-3">
          <label for="name" class="form-label">Name</label>
          <input type="text" class="form-control" id="name" required>
        </div>
        
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" required>
        </div>
        
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>

  <script>
    document.getElementById('contactForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const alertDiv = document.getElementById('formAlert');
      
      if (!name || !email) {
        alertDiv.style.display = 'block';
        alertDiv.innerHTML = `
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            Please fill in all required fields!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        `;
      } else {
        alertDiv.style.display = 'block';
        alertDiv.innerHTML = `
          <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>
            Thank you ${name}! We'll contact you at ${email}.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        `;
        this.reset();
      }
    });
  </script>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

8. Toast vs Alert Comparison

Feature	Alert	Toast
Purpose	Important messages	Non-intrusive notifications
Dismissal	Optional close button	Auto-hide or manual close
Position	Inline with content	Fixed corners (top-right, etc.)
Stacking	Vertically stacked	Can overlap
Persistence	Stays until dismissed	Auto-hides after delay

When to use Alerts:

Form validation messages
Success/error after user action
Important system notifications
Warnings that require user attention

When to use Toasts:

Background process completion
Non-critical updates
Chat message notifications
"Record saved" confirmations

9. Advanced Styling Examples

Gradient Alerts (Custom CSS)

<style>
  .alert-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
  }
  .alert-gradient .alert-link {
    color: #ffd700;
  }
</style>

<div class="alert alert-gradient" role="alert">
  <strong>Premium Alert!</strong> This is a custom gradient alert.
  <a href="#" class="alert-link">Learn more</a>
</div>

Shadow Alerts

<div class="alert alert-success shadow-lg" role="alert">
  <strong>Shadow effect!</strong> This alert has a large shadow.
</div>

Border Left Accent Alerts

<div class="alert alert-warning border-start border-5 border-warning" role="alert">
  <strong>Warning!</strong> This alert has an accent border on the left.
</div>

10. Accessibility Best Practices

<!-- ✅ Good: Proper ARIA attributes -->
<div class="alert alert-danger" role="alert">
  <span class="visually-hidden">Error:</span>
  Your password is incorrect.
</div>

<!-- ✅ Good: Dismissible alert with screen reader support -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
  <strong>Note:</strong> Your session will expire soon.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<!-- ❌ Bad: Missing role attribute -->
<div class="alert alert-success">
  Success!
</div>

Accessibility Tips:

Always include role="alert" for screen readers
Use .visually-hidden class to add context
Ensure close buttons have aria-label
Maintain sufficient color contrast

Quick Reference Table

Class	Purpose
`.alert`	Base alert class
`.alert-primary`	Blue info alert
`.alert-success`	Green success alert
`.alert-danger`	Red error alert
`.alert-warning`	Yellow warning alert
`.alert-info`	Cyan info alert
`.alert-dismissible`	Adds close button functionality
`.alert-link`	Styling for links inside alerts
`.fade .show`	Dismiss animation
`data-bs-dismiss="alert"`	JavaScript close trigger

Complete Demo Page

Here's a complete HTML page that includes all alert variations:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Alerts - Complete Guide</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <style>
    body { padding: 2rem; background: #f8f9fa; }
    .demo-section { margin-bottom: 2rem; background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    h2 { margin-bottom: 1rem; font-size: 1.5rem; }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="mb-4 text-center">Bootstrap 5 Alerts Tutorial</h1>
    
    <div class="demo-section">
      <h2>1. Basic Alerts</h2>
      <div class="alert alert-primary">Primary alert</div>
      <div class="alert alert-success">Success alert</div>
      <div class="alert alert-danger">Danger alert</div>
    </div>
    
    <div class="demo-section">
      <h2>2. Dismissible Alerts</h2>
      <div class="alert alert-warning alert-dismissible fade show">
        Click the X button to dismiss me!
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>3. Alerts with Icons</h2>
      <div class="alert alert-success d-flex align-items-center">
        <i class="bi bi-check-circle-fill me-2"></i>
        <div>Success with icon!</div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>4. Rich Content Alerts</h2>
      <div class="alert alert-primary">
        <h4 class="alert-heading">Rich Content Example</h4>
        <p>This alert contains a heading, paragraph, and a list.</p>
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
        </ul>
        <hr>
        <p class="mb-0">Additional footer information.</p>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>