In classic application you can create
alert message by applying CSS. For successful message we apply green font
color, for warning yellow color, error message we apply red color.
What if there is framework that have inbuilt
feature that provide a way to style messages to the user?
Answer:
Bootstrap framework provide a way to style messages to the user called
Bootstrap alerts.
You can add an optional close icon to
alert. For inline dismissal use the Alerts jQuery plugin. You can add a basic
alert by creating a wrapper <div> and adding a class of .alert and one of
the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning,
.alert-danger).
Example:
<!--below are some
alert messages created for leave application using bootstrap framework-->
<div class="alert
alert-success">Success! Well Leave application submitted.</div>
<div class="alert
alert-info">Info! Leave application processed to manager for approval.</div>
<div class="alert
alert-warning">Warning ,For you only 1 leave available in this quarter.</div>
<div class="alert
alert-danger">Error ! , require to select leave type.</div>
Link Alerts:
To
create link alerts use following steps:
1.
Add alert by creating basic wrapper <div>, then add
class alert and use one of four contextual classes (e.g., .alert-success,
.alert-info, .alert-warning, .alert-danger).
2.
Use the .alert-link utility class to quickly provide
matching colored links within any alert.
Example:
<!--link alert messages created for
leave application using bbotstrap framework-->
<div class="alert
alert-success">
<a href="#" class="alert-link">Success! Well Leave
application submitted.</a> </div>
<div class="alert
alert-info">
<a href="#" class="alert-link">Info! Leave application
processed for approvel.</a> </div>
<div class="alert
alert-warning">
<a href="#" class="alert-link">Warning ! Dont submit
this,onle one leave remaning.</a> </div>
<div class="alert
alert-danger">
<a href="#" class="alert-link">Error ! ,require to select
leave type.</a> </div>
Dismissal
Alerts:
1. Add alert by creating basic wrapper
<div>, then add class alert and use one of four contextual classes (e.g.,
.alert-success, .alert-info, .alert-warning, .alert-danger).
2. Also add optional .alert-dismissable to the
above <div> class.
3. Add a close button.
Example:
<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button>Error ! ,require to select
leave type.</div>