Quick Reach
Bootstrap Alert
The Bootstrap framework provides classes to work with different alerts in your web applications. An alert is a way to communicate with the user for specific actions like notifying of an error, a confirmation before submission of crucial information, alerting for files or account deletion upon delete request etc.
This tutorial will show you how to use the alert.js plugin provided by the Bootstrap and also extending it by using the third party plugin for creating more interactive alerts with examples.
To create any alert you need to use the .alert class in wrapper <div> with required contextual class. To learn more about it, see the examples below.
Creating a basic alert example
The Following example creates basic alerts for success and warning types. A wrapper div is assigned the .alert class with alert-success and the other with alert-warning class.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>Alert example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Alert Example</h1>
<div class=“alert alert-success”>Your information is successfully saved!</div>
<div class=“alert alert-warning”>Are you sure you want to delete this record?</div>
</div>
</body>
</html>
|
Create an alert with close button example
To give your bootstrap alert messages close or dismiss functionality, you have to create a button and add the data-dismiss=”alert” to it. Following example creates two alerts: the first one is danger alert type that uses alert-danger and other uses alert-info class with the close button.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<title>Alert example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Alert Example</h1>
<div class=“alert alert-danger”>
<button type=“button” data-dismiss=“alert”><span aria-hidden=“true”>×</span><span class=“sr-only”>Close</span></button>
This will delete your profile, Are you sure?</div>
<div class=“alert alert-info”>This is info alert type!
<button type=“button” data-dismiss=“alert”><span aria-hidden=“true”>×</span><span class=“sr-only”>Close</span></button>
</div>
</div>
</body>
</html>
|
Include HTML headings, link in alert example
You can include HTML elements like headings, links etc. in the bootstrap alerts. The following example creates two alerts with headings, <span> and hyperlinks inside the alert.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<title>Alert example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Alert Example</h1>
<div class=“alert alert-success”>
<h3>Information saved successfully! </h3><a href=“#”>View it here!</a>
</div>
<div class=“alert alert-warning”>
<span>Are you sure you want to delete this record?</span><a href=“#” class=“alert-link”> Read More!</a>
</div>
</div>
</body>
</html>
|
Creating Modal dialogs with Bootstrap
Though modal alerts are not available in Bootstrap framework, you can use third-party plug-in provided by Nick Payne to create the Modal dialogs. Following examples create basic, confirm, prompt and custom modal alerts using bootboxjs plugin. You can download the bootbox plug-in here:
https://github.com/makeusabrew/bootbox/releases/download/v4.2.0/bootbox.min.js
Basic Modal alert with bootbox
Following example creates a basic alert by using the bootbox plug-in. You simply need to place the bootbox.min.js file after downloading from the provided link to the js folder, where you have source files.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<title>Alert example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script src=“js/bootbox.min.js”></script>
<script>
$(document).on(“click”, “.alert”, function(e) {
bootbox.alert(“Basic Modal alert example!”, function() {
});
});
</script>
</head>
<body>
<div>
<h1>Bootstrap Modal Alert Example</h1>
<p>Bootbox plug-in example: <a href=#>Click here for Basic Alert!</a></p>
</div>
</body>
</html>
|
Confirm Modal alert example
Following example creates a Confirm modal alert that shows Cancel and Ok buttons to proceed. You need to simply replace bootbox.alert to bootbox.confirm in the above example to create confirm modal alert.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<title>Alert in Bootstrap example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script src=“js/bootbox.min.js”></script>
<script>
$(document).on(“click”, “.alert”, function(e) {
bootbox.confirm(“Are you sure to close the window?”, function() {
});
});
</script>
</head>
<body>
<div>
<h1>Bootstrap Modal Alert Example</h1>
<p>Bootbox plug-in example: <a href=#>Click here for Confirm Alert!</a></p>
</div>
</body>
</html>
|
Prompt Modal alert example
The example below creates a Prompt modal alert. The modal window asks to enter some text in a textbox and gives the option to press OK or Cancel. You can place handler in the javascript to process the information.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<title>Alert in Bootstrap example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script src=“js/bootbox.min.js”></script>
<script>
$(document).on(“click”, “.alert”, function(e) {
bootbox.prompt(“Are you sure to close the window?”, function() {
});
});
</script>
</head>
<body>
<div>
<h1>Bootstrap Modal Alert Example</h1>
<p>Bootbox plug-in example: <a href=#>Click here for Prompt Alert!</a></p>
</div>
</body>
</html>
|
Also see Twitter Bootstrap | Bootstrap Table | Bootstrap Form
Leave A Comment?