Notification
Notifications provide short, timely, and relevant information for your users.
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>Last updated