Tutorial on How to Make Bootstrap Alert Box

Bootstrap 3 Alert box is used to get the immediate attention of the end-users such as warning, error, confirmation or success messages. Here can be used as an optional close button to hide the box. the alert box is mainly 4 types and they are…

• 1. success or light green background with deep green text alert box,
• 2. info or light blue background with deep blue text alert box,
• 3. warning or light yellow background with deep yellow text alert box,
• 4. danger or light red background with deep red text alert box,

to use a close button give an anchor tag with class name .close and data-dismiss=” alert”

example:

<a href="#" class="close" data-dismiss="alert">×</a>

1. success or light green background with deep green text alert box

It indicates a successful or positive action and to use it use the class name .alert and .alert-success to make it animated you can use the class name .fade and .in also

example:

<div class="alert alert-success fade in">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Success!</strong> Your message has been sent.
</div>

2. info or light blue background with deep blue text alert box

It indicates a neutral informative change or action and to use it use the class name .alert and .alert-info to make it animated you can use the class name .fade and .in also

example:

<div class="alert alert-info fade in">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Note!</strong> Please read carefully.
</div>

3. warning or light yellow background with deep yellow text alert box

It indicates a warning that might need attention and to use it use the class name .alert and .alert-warning to make it animated you can use the class name .fade and .in also

example:

<div class="alert alert-warning fade in">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Warning!</strong> There was a problem</a>.
</div>

4. danger or light red background with deep red text alert box

It indicates a dangerous or potentially negative action and to use it use the class name .alert and .alert-danger to make it animated you can use the class name .fade and .in also

example:

<div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <strong>Error!</strong> A problem occurred.
</div>

You have learned Bootstrap 3 Alert box and please provide your comment to make the site better and useful.

Thanks for reading