Notification

Notifications provide short, timely, and relevant information for your users.

Interactive demo

Types

Notifications / Alerts are available for any length of text, as well as an optional dismiss button.

Variants

For proper styling, use one of the required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts you must use ( JS provided).

Examples

Form field validation alerts

Notifications

<!--Form field validation alerts-->
<span class="message text-success"><i class="fas fa-check-circle me-1"></i>This is a success message.</span>
<span class="message text-warning"><i class="fa-solid fa-triangle-exclamation me-1"></i>This is a warning message.</span>
<span class="message text-danger"><i class="fas fa-exclamation-circle me-1"></i>This is an error message. </span>
<!--Notifications-->
<div class="alert alert-default alert-dismissible fade show" role="alert"> This is a <strong>dismissable!</strong> notification/alert.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <!--With a link -->
    <div class="alert alert-default" role="alert"> This is a notification/alert <a href="#" class="alert-link">with a link</a>. </div>
    <!--With an icon -->
    <div class="alert alert-default has-icon alert-dismissible fade show" role="alert"> <span class="has-icon"><i class="fas fa-info-circle"></i></span> This is a notification/alert <a href="#" class="alert-link">with an icon</a>.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-default has-icon alert-large" role="alert"> <span class="has-icon"><i class="fas fa-info-circle"></i></span>
      <div class="alert-content">
        <h4>Title / Heading of the alert</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>
    <!--Success-->
    <div class="alert alert-success has-icon alert-large" role="alert"> <span class="has-icon"><i class="fas fa-check-circle"></i></span>
      <div class="alert-content">
        <h4>Success</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>
    <!--Warning-->
    <div class="alert alert-warning has-icon alert-large" role="alert"> <span class="has-icon"><i class="fas fa-exclamation-triangle"></i></span>
      <div class="alert-content">
        <h4>Warning</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>
    <!--Warning-->
    <div class="alert alert-error has-icon alert-large" role="alert"> <span class="has-icon"><i class="fas fa-times-circle"></i></span>
      <div class="alert-content">
        <h4>Error Message</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>
    <!--Example-->
    <div class="alert alert-example has-icon alert-large" role="alert"> <span class="has-icon"><i class="fas fa-lightbulb-on"></i></span>
      <div class="alert-content">
        <h4>Example</h4>
        <p>Description will be shown here. This can be a combination of dismissible and link.</p>
      </div>
    </div>

Full width notification bars

<!--Full width notification bar to show system down time, maintenance notices etc..-->
<div class="notification_fw bg-primary">
  <div class="container">
    <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
    <i class="fal fa-info-circle"></i> <strong>Important Notice:</strong> This is a full width notification bar. You have a notification! </div>
</div>
<div class="notification_fw bg-success">
  <div class="container">
    <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
    <i class="fal fa-check-circle"></i> <strong>Success:</strong> This is a full width notification bar. You have a notification! </div>
</div>
<div class="notification_fw bg-warning">
  <div class="container">
    <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
    <i class="fal fa-exclamation-circle"></i> <strong>Warning:</strong> This is a full width notification bar. You have a notification! </div>
</div>
<div class="notification_fw bg-error">
  <div class="container">
    <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
    <i class="fal fa-times-circle"></i> <strong>Error:</strong> This is a full width notification bar. You have a notification! </div>
</div>

Notification bar with Carousel

<div id="alert_carousel" class="carousel slide mb-3" data-bs-ride="carousel">
  <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="notification_fw">
        <div class="notification_fw-details">
          <p><span class="has-icon"><i class="fas fa-info-circle"></i></span>1 Description will be shown here. This can be a combination of dismissible and link.</p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="notification_fw">
        <div class="notification_fw-details">
          <p><span class="has-icon"><i class="fas fa-info-circle"></i></span>2 Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Left and right controls -->
  <button class="carousel-control-prev" type="button" data-bs-target="#alert_carousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
  <button class="carousel-control-next" type="button" data-bs-target="#alert_carousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>