Bootstrap Alert
An alert box is used to inform users for certain actions or any feedback message. An alert box may have some text and a button for dismissing it.
Bootstrap comes with a contextual alert box. You can choose an alert box as per your requirement such as for warning alerts use a warning alert box and so on.
Creating an alert box using Bootstrap
- To create alert box add .alert class to <div> tag.
- Add contextual classes within the alert box using .alert-success , alert-success , .alert-danger , .alert-warning.
Example: Creating an alert box using bootstrap
Here in the example, we have created colored alert boxes using a contextual class like a primary alert box, a success alert box, an alert box for some dangerous message, and an alert box for warning.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Bootstrap </title>
</head>
<body>
<div class="container">
<h2> Alert Message Box </h2>
<div class="alert alert-primary" role="alert">
This is a primary alert box
</div>
<div class="alert alert-success" role="alert">
This is a alert box for success context.
</div>
<div class="alert alert-danger" role="alert">
This is a alert box for danger context.
</div>
<div class="alert alert-warning" role="alert">
This is a alert box for warning context.
</div>
</div>
</body>
</html>
Output:
Here is the output for different types of alert boxes.
Bootstrap Alert Link
Links can also be added to the alert box. Add a matching color link to your alert box using the .alert-link utility class.
Example: Creating alert links using bootstrap
We can also add links to the alert box. Here in the program, we have added links using the <a> tag to the alert box.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Bootstrap </title>
</head>
<body>
<div class="container">
<h2> Alert Message Box </h2>
<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">a link</a>. click here.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert with <a href="#" class="alert-link">a link</a>. click here.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert with <a href="#" class="alert-link">a link</a>. click here.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">a link</a>. click here.
</div>
</div>
</body>
</html>
Output:
Here is an alert box with a link inside it.
Adding contents to Alert Messages
Alerts can also contain additional contents like heading, paragraph, or dividers. Let us add given elements to Alert.
Example: Adding content to alerts in Bootstrap
We can add a heading to the alert box using the .alert-heading class under the parent class. Also add text using HTML tags like <p>. Further, we can add another paragraph using divider(here <hr> tag).
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Bootstrap </title>
</head>
<body>
<div class="container">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Successful!!</h4>
<p>So we have added heading successfully and now we will write a longer text to see how it appears on the alert box.we have added heading successfully and now we will write a longer text to see how it appears on the alert box.</p>
<hr>
<p class="mb-0">Further we will add another paragraph using divider</p>
</div>
</div>
</body>
</html>
Output:
Here is the output where we have added a long paragraph, header, and divider.
Dismissing Alert box using Bootstrap
- Dismissal buttons are also present in an alert box. To dismiss the alert box use alert Javascript plugins.
- Add .alert-dismissible class to the parent class .
- Add .data-dismiss="alert" attribute within <button> class.
- For animating use .fade and .close classes.
- Here × is a HTML entity for close buttons.
Example: Dismissing alert box using bootstrap
So now we know the attribute for alert dismissal. Add the .alert-dismissible attribute to the .alert class. × are added within <button> class for dismissing the alert box.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Bootstrap </title>
</head>
<body>
<div class="container">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Hello</strong> You.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</body>
</html>
Output:
Conclusion
So now we know how to create an alert box. Use contextual class for creating a colored alert box. Add headers and paragraphs and links to the alert box. And dismiss is using dismissable attributes present within the alert class. All this you can do easily using bootstrap. No more hassles of writing long codes for CSS like in HTML. Use the readymade framework of Bootstrap and save your time.
