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.
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">×</a>
<strong>Warning!</strong> Upgrade Flash Player for better Enhancement.
</div>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Success!</strong> Your Post was successfully shared.
</div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Error!</strong> There was a problem around your network.
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</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-danger,
alert-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">×</button>
<strong>Warning!</strong> This alert is using Button to close.
</div>
<div class="alert alert-warning">
<span class="close" data-dismiss="alert">×</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">×</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">×</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">×</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">×</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">×</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">×</a>
<strong>Error!</strong> There was a problem around your network.
</div>
<div class="alert alert-danger">
<a href="#" class="close">×</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.