How to use Bootstrap alerts and make them dismissible?

Bootstrap alerts can be turned off by adding specific classes and JavaScript support, 1. Create basic alerts with .alert and context classes such as .alert-success; 2. Add .alert-dismissible, .fade, and .show classes to support shutdown and fade-out effects; 3. Add buttons with .btn-close class and data-bs-dismiss="alert" attributes to the alert for shutdown; 4. Ensure that the Bootstrap JavaScript bundle is introduced to enable shutdown behavior; 5. Optionally add icons or listen for closed.bs.alert events to enhance functionality and interactivity, ultimately implementing a complete shutdown alert component.

Bootstrap alerts are a simple way to provide feedback messages for users, such as success, warnings, or errors. Making them dismissible (ie, allowing users to close them with a button) improves user experience. Here's how to use Bootstrap alerts and make them dismissible.

✅ Basic Bootstrap Alert

Start with a basic alert by using the .alert class along with a contextual class like .alert-success , .alert-danger , etc.

 <div class="alert alert-warning">
  This is a warning message!
</div>

✅ Dismissible Alert (With Close Button)

To make an alert dismissible:

1. Add the .alert-dismissible class to the alert container.
2. Include a close button ( <button> ) with .btn-close .
3. Use data-bs-dismiss="alert" to enable JavaScript-based dismissal.

 <div class="alert alert-info alert-dismissible fade show" role="alert">
  <strong>Info!</strong> This alert can be closed.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Important classes and attributes:

• alert-dismissible — Enables padding for the close button and positions it properly.
• fade show — Required for smooth fade-in/fade-out transitions (if using Bootstrap's CSS transitions).
• data-bs-dismiss="alert" — Triggers the JavaScript behavior to remove the alert when clicked.
• aria-label="Close" — Improves accessibility.

✅ Types of Alert Contexts

You can use different contextual styles:

 <div class="alert alert-success alert-dismissible fade show" role="alert">
  Success! Operation completed.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

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

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! Proceed with caution.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

✅ Optional: Add Icons or Extra Content

You can enhance alerts with icons (eg, from Bootstrap Icons) or additional formatting.

 <div class="alert alert-primary alert-dismissible fade show" role="alert">
  <i class="bi bi-info-circle-fill"></i>
  <strong>Heads up!</strong> This feature is experimental.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Make sure to include Bootstrap Icons or another icon library if using icons.

✅ JavaScript Events (Optional)

Bootstrap alerts trigger events you can hook into:

 const alert = document.querySelector('.alert');
alert.addEventListener('closed.bs.alert', function () {
  console.log('Alert was closed');
});

Useful if you need to run code after an alert is dismissed.

✅ Ensure Bootstrap JavaScript is Included

For dismissible alerts to work, you must include Bootstrap's JavaScript bundle (which includes the Alert plugin):

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Without this, the data-bs-dismiss="alert" won't work.

Basically, just remember:

• Use .alert context class
• Add .alert-dismissible and .fade.show
• Include the close button with data-bs-dismiss="alert"
• Include Bootstrap JS

And your alerts will be fully functional and dismissible.

The above is the detailed content of How to use Bootstrap alerts and make them dismissible?. For more information, please follow other related articles on the PHP Chinese website!