1. Basic usage of alert
Adding alert component by applying .alertclass with following one of 8 available classse for 8 types altert. And adding "role" attribute ：
alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark
Example:
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
2. Using links within an alert
Adding .alert-linkclass to a <a>element obtains a matching colored links within any alert:
Example:
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
3. Dismissing an alert
Enable dismissing for an alert by adding class .alert-dismissible .fade .show . .fade and.showclasses animate alerts when dismissing them. And then place a dismiss button with class.close and data-dismiss="alert" aria-label="Close" attributes. A <span> should be wrapped by <button>. <span>element is essential to show a cross sign at the top-right cornor of alert.
Example:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
