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"> &times; </button>Error ! ,require to select
leave type.</div>