Alerts in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 7556 red flag
Rating: 5 out of 5  
 2 vote(s)

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Popovers in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
so far we have discussed about popovers in Bootstrap in previous chapter and now lets see some alerts in this one.
we have already covered alerts in Bootstrap Utilities. Lets see them in detail here.

Objective

The main objective of this article is to learn alerts of Bootstrap with JavaScript functions.

Using Bootstrap code

Lets start with some normal alerts that are available in Bootstrap before going in depth. 
<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> Upgrade Flash Player for better Enhancement.
</div>
<div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Success!</strong> Your Post was successfully shared.
</div>
<div class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Error!</strong> There was a problem around your network.
</div>
<div class="alert alert-info">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Info!</strong> Please read the terms and conditions.
</div>
If you observe the above code, you will come to know that we are using different predefined styles such as alert-warning, alert-success, alert-dangeralert-info etc. which gives you the following result in your browser,

Alerts with Data Attributes:
We can also use other data attributes such as buttons, span etc. for alerts. take a look at the below code in which we are using span and button instead of 'a' tag.
<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> This alert is using Button to close.
</div>   
<div class="alert alert-warning">
    <span class="close" data-dismiss="alert">&times;</span>
    <strong>Warning!</strong> This alert is using Span to close.
</div>
Now run this code in your browser and you will see no change in your alert operations


Alert using Different Bootstrap Classes:
We can also create alerts using Bootstrap's predefined classes.

Using Well
Now lets see making alerts through well class of Bootstrap below,
<div class="well">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Success!</strong> Your Post was successfully shared.
</div>
Run this code in your browser to get output something like below


Using Panel
Observe the below code in which we are using panel class of Bootstrap instead of alert.
<div class="panel panel-primary">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Success!</strong> Your Post was successfully shared.
</div>
Run the above code in the browser to get the following output

Alert using JavaScript:
We can also set alerts using JavaScript like below,
<script type="text/javascript">
$(document).ready(function () {
    $(".MyAlert").click(function () {
        $(".alert").alert();
    });
});
</script>
and HTML as,
<div class="MyAlert">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Warning!</strong> Upgrade Flash Player for better Enhancement.
</div>
Run this code in your browser to see the alert message like below

Actually, the above alert fires without JavaScript but if we want to add any additional functionalities, we can do them from JavaScript.

Alert Events from JavaScript:
There are two alert events in Bootstrap for JavaScript which are close.bs.alert and closed.bs.alert. Both have same functionality with slight change that occurs when we use CSS Fade-in, Fade-out etc. actions. Take a look at the below example code of using Alert Event,
<script type="text/javascript">
$(document).ready(function () {
    $("#Success").on('close.bs.alert', function () {
        alert("This Alert box is being closed.");
    });
});
</script>
and HTML as,
<div class="alert alert-danger" id="Success">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Error!</strong> There was a problem around your network.
</div>
Run this combination of code in your browser to see the alert event something like below as result,


Closing Alert from JavaScript:
We can also close or remove the alerts from JavaScript.
<script type="text/javascript">
$(document).ready(function () {
    $(".close").click(function () {
        $("#Danger").alert('close');
    });
});
</script>
In the above code we are using the function 'close' for alert action which allows us to close the alert message.
And HTML is,
<div class="alert alert-danger" id="Danger">
    <a href="#" class="close">&times;</a>
    <strong>Error!</strong> There was a problem around your network.
</div>
Examine the result by running this combination in your browser which gives you following output


Closing Multiple Alerts at one time:
If you want to close all the alert messages at once, follow this approach
<script type="text/javascript">
$(document).ready(function () {
    $(".close").click(function () {
        $("#Danger").alert('close');
    });
});
</script>
Now your HTML,
<div id="Danger">
    <div class="alert alert-danger">
        <a href="#" class="close">&times;</a>
        <strong>Error!</strong> There was a problem around your network.
    </div>
    <div class="alert alert-danger">
        <a href="#" class="close">&times;</a>
        <strong>Error!</strong> There was a problem building solution.
    </div>
</div>
This combination will gives you the following output in which you can close multiple alerts at once


Conclusion

In this article, we have seen different types of alerts using Bootstrap in detail. Hope you understand. If you have any doubts on this topic, please ask in the below comment box.

Thanks for reading.

Regards,
Krishna.

Recommendation
Read Tabs with JavaScript in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)