Bootstrap - Bootstrap Alert

Bootstrap alerts are a UI component provided by the Bootstrap framework that allow developers to display contextual feedback messages, such as success notifications, warnings, errors, or informational messages. They are commonly used to inform users about actions, statuses, or system events.

1. Basic Structure of a Bootstrap Alert

Bootstrap alerts are built using the .alert class combined with contextual classes like .alert-success, .alert-danger, etc.

Example:

<div class="alert alert-success" role="alert">
  Your profile has been updated successfully!
</div>

Explanation:

  • div.alert → Main alert container.

  • alert-success → Contextual color (green for success).

  • role="alert" → Accessibility feature for screen readers.

2. Different Types of Bootstrap Alerts

Bootstrap provides eight contextual alert classes:

Alert Type Class Purpose Default Color
Primary .alert-primary General important information Blue
Secondary .alert-secondary Neutral message Gray
Success .alert-success Positive actions, confirmations Green
Danger .alert-danger Errors, failures, critical warnings Red
Warning .alert-warning Warnings, potential issues Yellow/Orange
Info .alert-info Informational messages Light blue
Light .alert-light Subtle notification Light gray
Dark .alert-dark High-contrast message Dark gray

Example showing all types:

<div class="alert alert-primary" role="alert">This is a primary alert!</div>
<div class="alert alert-secondary" role="alert">This is a secondary alert!</div>
<div class="alert alert-success" role="alert">This is a success alert!</div>
<div class="alert alert-danger" role="alert">This is a danger alert!</div>
<div class="alert alert-warning" role="alert">This is a warning alert!</div>
<div class="alert alert-info" role="alert">This is an info alert!</div>
<div class="alert alert-light" role="alert">This is a light alert!</div>
<div class="alert alert-dark" role="alert">This is a dark alert!</div>

3. Dismissible (Closeable) Alerts

You can make alerts dismissible using:

  • .alert-dismissible → Adds padding for the close button.

  • .fade and .show → Adds a smooth fade-out effect.

  • .btn-close → Bootstrap's close button.

Example:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> Please check your email for verification.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

How it works:

  • data-bs-dismiss="alert" → Tells Bootstrap to close the alert.

  • btn-close → Creates an "X" button.

  • fade show → Animates the alert when opening or closing.

4. Adding Links Inside Alerts

Bootstrap automatically styles links inside alerts if you add the .alert-link class.

Example:

<div class="alert alert-info" role="alert">
  New update available! <a href="#" class="alert-link">Click here to download</a>.
</div>

5. Adding Icons to Alerts (Optional)

Bootstrap doesn’t include icons by default, but you can use Bootstrap Icons or Font Awesome.

Example using Bootstrap Icons:

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

6. Using JavaScript to Control Alerts

Bootstrap provides JavaScript APIs to manage alerts.

Example: Programmatically close an alert

<div id="myAlert" class="alert alert-danger alert-dismissible fade show" role="alert">
  Error occurred! Please try again.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<script>
  const myAlert = document.getElementById('myAlert');
  const alertInstance = new bootstrap.Alert(myAlert);

  // Close after 3 seconds
  setTimeout(() => {
    alertInstance.close();
  }, 3000);
</script>

7. Customizing Alert Colors

If you want to customize alerts, you can override Bootstrap’s default styles with CSS:

Example:

<style>
  .alert-custom {
    background-color: #4b0082;
    color: white;
    border: 2px solid #2e0854;
  }
</style>

<div class="alert alert-custom" role="alert">
  This is a custom-colored alert!
</div>

8. Bootstrap 5 vs Bootstrap 4 Alerts

Feature Bootstrap 4 Bootstrap 5
Close button class .close .btn-close
JavaScript API jQuery-based Vanilla JS
Animation classes .fade show Same
Icons support Manual Same

9. Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Alerts</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap Alerts Example</h2>

  <!-- Basic Alert -->
  <div class="alert alert-success" role="alert">
    Welcome! You have successfully logged in.
  </div>

  <!-- Dismissible Alert -->
  <div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Error!</strong> Something went wrong.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>

  <!-- Alert with Link -->
  <div class="alert alert-warning" role="alert">
    New features available! <a href="#" class="alert-link">Learn more</a>.
  </div>

  <!-- Custom Alert -->
  <div class="alert alert-dark" role="alert">
    This is a dark themed alert.
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

10. Best Practices

  • Use consistent colors based on context.

  • Always include role="alert" for accessibility.

  • Use dismissible alerts for temporary messages.

  • Use JavaScript API when you need dynamic alerts.

  • Use icons or links to improve usability.