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 Validation Alerts -->
<div class="form-group  required"> <label class="col-form-label"> Input with success
message</label>
                                        <div class="field-icon field-success"> <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                                        </div> <span class="message text-success"><i class="fas fa-check-circle mr-1"></i>This is a success message.</span>
                                        
                                    </div>
									
									<div class="form-group required">
											  <label class="col-form-label">Input with warning message</label>
											  <div class="field-icon field-warning">
												<input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
											  </div>
											  <span class="message text-warning"><i class="fas fa-exclamation-triangle mr-1"></i>This is a warning message.</span> </div>
                                    <div class="form-group required  field-has-error"> <label class="col-form-label">Input with error message</label> <input class="form-control" type="text" spellcheck="false" data-ms-editor="true"> <span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an error message.
                                        </span> 
                                    </div>
<!--Default Alert-->
<div class="alert alert-default" role="alert"> This is a standard notification/alert. </div>
<!--Dismissable Alert-->
<div class="alert alert-default alert-dismissible fade show" role="alert"> This is a <strong>dismissable!</strong> notification/alert.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times-circle"></i></span> </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><i class="fal fa-info-circle"></i></span> This is a notification/alert <a href="#" class="alert-link">with an icon</a>.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times-circle"></i></span> </button>
</div>
<div class="alert alert-default has-icon alert-large" role="alert">
   <span><i class="fal 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><i class="fal 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><i class="fal 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><i class="fal 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><i class="fal 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 id="notification" class="notification_fw bg-primary" style="display: block;">
  <div class="container-fluid">
  <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 d-block">
    <div class="container-fluid">
      <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 d-block">
    <div class="container-fluid">
      <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 d-block">
    <div class="container-fluid">
      <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 carousel-fade mb-3" data-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 -->
  <a class="carousel-control-prev" href="#alert_carousel" data-slide="prev">
    <i class="fal fa-chevron-left"></i>
  </a>
  <a class="carousel-control-next" href="#alert_carousel" data-slide="next">
    <i class="fal fa-chevron-right"></i>
  </a>
</div>