How can we add all the type of alert messages in Bootstrap
By Saurabh SinghToday in this Bootstrap tutorial, we will learn how easily we can create alert messages in Bootstrap. Alerts have created using the alert class, and you can just add any one of the four contextual classes or you can add all classes, it depends on the user.
The Four Contextual Classes are as follow as:
- alert-success
- alert-info
- alert-warning
- alert-danger
How to give an option to close the alert messages?
To close the alert messages you just have to follow these steps:
- Add an alert-dismissible class to the div named as the container.
- Then add class = “close”.
- And finally, add data-dismiss = “alert” to a link so that when you click on that, the alert box will close.
Note: To help improve accessibility for users, that’s why I’m including the aria-label=”close” attribute while creating a close button. And × is an HTML entity that is the most used icon for close buttons than the letter “x”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</body>
</html>
You can also learn these in Bootstrap:
Leave a Reply