Interactive Notification Alerts in Bootstrap 5.3

Alert in Bootstrap

In Bootstrap 5.3, the Alert component provides a simple and versatile way to display notification messages or alerts to users. Alerts are commonly used to provide important information, warnings, success messages, or error messages to users in a visually noticeable manner.

The Alert component in Bootstrap 5.3 comes with various built-in styles that can be easily applied to match the message's purpose and severity. These styles include success, warning, danger, and info, which are represented by corresponding CSS classes.

To use the Alert component, you need to create a <div> element with the alert class and the desired style class (e.g., alert-success, alert-warning, alert-danger, alert-info). Inside the <div>, you can place your message content or other HTML elements.

Alerts can be made dismissible by including a close button. Adding the alert-dismissible class to the <div> and including a <button> element with the close class inside the alert allows users to dismiss or close the alert.

The Alert component in Bootstrap 5.3 is highly customizable, allowing you to control its appearance, behavior, and positioning. You can further modify the styling, add icons, or incorporate additional interactivity using JavaScript or custom CSS classes.

<div class="alert alert-primary">This is Sample Alert</div>
<div class="alert alert-secondary">This is Sample Alert</div>
<div class="alert alert-success">This is Sample Alert</div>
<div class="alert alert-danger">This is Sample Alert</div>
<div class="alert alert-warning">This is Sample Alert</div>
<div class="alert alert-info">This is Sample Alert</div>
<div class="alert alert-light">This is Sample Alert</div>
<div class="alert alert-dark">This is Sample Alert</div>

Alert With Link in Bootstrap

The alert-link class in Bootstrap is a predefined CSS class specifically designed for styling links within an Alert component. It is used to create visually distinctive and interactive links within an alert message.

When you apply the alert-link class to an anchor tag (<a>), it modifies the link's appearance to match the styling conventions of Bootstrap's Alert component. This class adds an underline to the link, changes its color, and adjusts its hover and focus effects to provide visual cues and improve accessibility.

Here's an example of how to use the alert-link class in Bootstrap:

<div class="alert alert-primary">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-secondary">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-success">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-danger">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-warning">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-info">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-light">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
<div class="alert alert-dark">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>

By using the alert-link class, you can ensure that links within your Alert components have a consistent and recognizable style, making them stand out and easy to identify as interactive elements for users.

Dynamic Alert in Bootstrap

In Bootstrap, a Dynamic Alert refers to an alert component that is created, modified, or removed dynamically using JavaScript or jQuery. It allows you to programmatically generate alerts based on user actions, server responses, or any other dynamic events in your web application.

By leveraging the dynamic capabilities of Bootstrap's Alert component, you can provide real-time feedback, display error messages, or show updates to the user without requiring a full page reload.

<div id="live-alert"></div>
<button class="btn btn-primary" id="btn-alert">Show Alert</button>

script

const alertDiv = document.getElementById("live-alert");

const appendAlert = (message, type = "success") => {
    /*const wrapper = document.createElement("div");
    wrapper.classList.add("alert", "alert-" + type, "alert-dismissible");
    wrapper.innerHTML = message;
    const btn = document.createElement("button");
    btn.classList.add("btn-close");
    btn.setAttribute("data-bs-dismiss", "alert");
    wrapper.append(btn);*/

    const alert = `
    <div class="alert alert-${type} alert-dismissible fade show">
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>

    `;
    return alert;
    };

    document.getElementById("btn-alert").addEventListener("click", function () {
    alertDiv.innerHTML = appendAlert("This is Sample Message", "danger");
});

By implementing Dynamic Alerts in Bootstrap, you can enhance the interactivity and user experience of your web application by providing timely and contextual feedback to users.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alert</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>
  <body>
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-12">
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Alert in Bootstrap</p>

          <div class="alert alert-primary">This is Sample Alert</div>
          <div class="alert alert-secondary">This is Sample Alert</div>
          <div class="alert alert-success">This is Sample Alert</div>
          <div class="alert alert-danger">This is Sample Alert</div>
          <div class="alert alert-warning">This is Sample Alert</div>
          <div class="alert alert-info">This is Sample Alert</div>
          <div class="alert alert-light">This is Sample Alert</div>
          <div class="alert alert-dark">This is Sample Alert</div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Alert With Link in Bootstrap</p>

          <div class="alert alert-primary">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-secondary">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-success">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-danger">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-warning">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-info">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-light">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>
          <div class="alert alert-dark">This is Sample Alert <a href="#" class="alert-link">Click Here </a></div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Alert With Icons in Bootstrap</p>
          <div class="alert alert-primary">
            <i class="bi-alarm"></i>
            This is Sample Alert
          </div>
          <div class="alert alert-secondary d-flex align-items-center gap-3">
            <i class="bi-apple"></i>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ipsum eligendi quia voluptates! Voluptatibus laudantium fuga veniam magni cum ea earum est accusantium corrupti iure ad animi nulla, dolores numquam.
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Alert With Additional Content in Bootstrap</p>

          <div class="alert alert-primary">
            <h3 class="alert-heading">Sample Heading</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, nisi cum. Sit iure reprehenderit numquam blanditiis qui, ab nobis, dolorem deserunt alias illum cum dolorum laudantium ipsum dicta a omnis.</p>
            <hr />
            <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi temporibus minima labore ipsa consequuntur sint!</p>
          </div>
          <hr class="my-3" />
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Dismissing Alert in Bootstrap</p>
          <div class="alert alert-danger alert-dismissible fade show">
            This is a Dismissible Alert
            <button type="button" class="btn-close" style="font-size: 11px" data-bs-dismiss="alert"></button>
          </div>
          <div class="alert alert-warning alert-dismissible fade show">
            This is a Dismissible Alert
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>

          <hr class="my-3" />
          <p class="text-primary fw-semibold">Dynamic Alert in Bootstrap</p>

          <div id="live-alert"></div>
          <button class="btn btn-primary" id="btn-alert">Show Alert</button>

          <!--Col end -->
        </div>

        <!--Row End-->
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
      const alertDiv = document.getElementById("live-alert");

      const appendAlert = (message, type = "success") => {
        /*const wrapper = document.createElement("div");
        wrapper.classList.add("alert", "alert-" + type, "alert-dismissible");
        wrapper.innerHTML = message;
        const btn = document.createElement("button");
        btn.classList.add("btn-close");
        btn.setAttribute("data-bs-dismiss", "alert");
        wrapper.append(btn);*/

        const alert = `
        <div class="alert alert-${type} alert-dismissible fade show">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
        
        `;
        return alert;
      };

      document.getElementById("btn-alert").addEventListener("click", function () {
        alertDiv.innerHTML = appendAlert("This is Sample Message", "danger");
      });
    </script>
  </body>
</html>

Live Preview

Alerts are commonly used in web development for various purposes, such as displaying form validation messages, notifying users of successful actions, displaying error messages, or providing important information that requires user attention.