Bootstrap 5 Alerts

Bootstrap 5 Alerts Guide

Bootstrap 5 Alerts are useful for displaying important messages, warnings, or notifications on a webpage. They are highly customizable with different styles, dismissible options, and additional content support.

1. Basic Alert

Use the .alert class along with the .alert-* class for different alert styles.

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

2. Dismissible Alerts

Add .alert-dismissible and a close button to allow users to dismiss alerts.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    This is a warning alert with a close button.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Explanation:

.alert-dismissible → Enables dismiss functionality.
.fade and .show → Adds a smooth transition effect.
btn-close → Bootstrap's close button.

3. Alerts with Additional Content

Alerts can contain headings, paragraphs, and links.

<div class="alert alert-info">
    <h4 class="alert-heading">Important Information!</h4>
    <p>This alert contains additional content like headings and text.</p>
    <hr>
    <p class="mb-0">You can also include a <a href="#" class="alert-link">link</a>.</p>
</div>

4. Alerts with Icons (Using Bootstrap Icons)

You can use Bootstrap Icons inside alerts for better visibility.

<div class="alert alert-danger">
    <i class="bi bi-exclamation-triangle-fill"></i>
    Warning! This is a danger alert.
</div>

Note: Add Bootstrap Icons in your project for this to work.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

5. JavaScript-Controlled Alerts (Show/Hide on Click)

You can control alerts dynamically using JavaScript.

<button class="btn btn-success" onclick="showAlert()">Show Alert</button>

<div id="myAlert" class="alert alert-success alert-dismissible fade" role="alert">
    This is a dynamic alert!
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<script>
    function showAlert() {
        let alert = document.getElementById("myAlert");
        alert.classList.add("show");
    }
</script>

Conclusion

✔ Bootstrap 5 Alerts are great for notifications, warnings, and user messages.
✔ You can customize them with colors, dismiss functionality, and additional content.
✔ JavaScript can be used to show/hide alerts dynamically.

Need more examples? Let me know!

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.