Alert messages are very popular with JavaScript to provide interactive information to users. It is used for form validations and throwing messages on the browser. However, you can also use alerts with CSS for showing static messages by excluding the script files. Many themes and plugins also use Bootstrap framework to show these alert messages. In this article, we will explain how to create different types of Bootstrap alerts.
Bootstrap 3 Vs Bootstrap 4 and 5 Alerts
In Bootstrap version 3 there were four colored alerts, but in Bootstrap versions 4 and 5 there are totally 8 types of alerts. Below is the list of contextual classes used in Bootstrap 5 versions.
| CSS Class | Purpose |
|---|---|
| alert | Base alert class, used to add border, margin and bottom to other alert classes. |
| alert alert-primary | Used to create an alert with primary color. |
| alert alert-secondary | Used to create an alert with secondary. |
| alert alert-success | Used to create an alert with light green to indicate a positive action. |
| alert alert-info | Information message in skyblue color. |
| alert alert-danger | Message for danger, stop or negative actions. |
| alert alert-warning | Indicative warning message. |
| alert alert-light | Indicative lighter message. |
| alert alert-dark | Indicative darker message. |
The highlighted four types are added newly from version 4.
Bootstrap Alerts
Below is how the alert messages will look like on a published website. The alert classes can be used with any of the HTML block element, in our example let us use with <div> tag.
And the code for the alert messages is given below. For simple alerts, you don’t need to include script files.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Alerts -->
<div class="alert alert-primary" role="alert">
This is a primary alert message to show some detail.
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert message to show some detail.
</div>
<div class="alert alert-success" role="alert">
This is a success message to show positive action.
</div>
<div class="alert alert-info" role="alert">
This is an information message to show more detail.
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert to indicate a warning before trying.
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert to tell users stop doing things.
</div>
<div class="alert alert-light" role="alert">
This is a light alert to tell users stop doing things.
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert to tell users stop doing things.
</div>
<!-- End of Alerts -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Using Different Content within Alerts
You can use most of the HTML elements within alert boxes using the dedicated classes for heading and links. Use the default HTML tags for paragraph and other typography elements. Let us create a paragraph with heading and a sample image inside the success alert box.
<div class="alert alert-success" role="alert"> <h5 class="alert-heading">This is Alert Heading</h5> <p>You can enter any text message to convey to your users and below is an image.</p> <img src="https://img.webnots.com/2017/04/Manage-Multiple-Blogs.jpg"> </div>
The alert box will look like below:
Adjusting Link Colors within Alerts
The hyperlinks may create problems with visibility as the link color may not sync with the alert box color. Bootstrap solves this problem by providing a utility class “alert-link” to inherit the link color from the alert color.
The usage of “alert-link” class should be like below:
<div class="alert alert-primary" role="alert"> This is a primary alert and <a href="#" class="alert-link">here is a link with primary color</a>. </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert and <a href="#" class="alert-link">here is a link with secondary color</a>. </div> <div class="alert alert-success" role="alert"> This is a success alert and <a href="#" class="alert-link">here is a link with success color</a>. </div> <div class="alert alert-info" role="alert"> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <div class="alert alert-warning" role="alert"> This is a warning alert and <a href="#" class="alert-link">here is a link with warning color</a>. </div> <div class="alert alert-danger" role="alert"> This is a danger alert and <a href="#" class="alert-link">here is a link with danger color</a>. </div> <div class="alert alert-light" role="alert"> This is a light alert and <a href="#" class="alert-link">here is a link with light color</a>. </div> <div class="alert alert-dark" role="alert"> This is a dark alert and <a href="#" class="alert-link">here is a link with dark color</a>. </div>
Final result should look like below:
Adding Close or Dismiss Button to Alerts
As of now we have used only the base Bootstrap CSS framework to create the alerts. These CSS alerts are static with no possibility to close them. There are dedicated jQuery plugins available to create dismissible alerts with a “X” button at the right end of the alert. You don’t need to run for those plugins, the compiled Bootstrap JavaScript and the CSS framework will do the magic for you.
Below is a warning alert with a close button, once clicked on the “X” button the alert will disappear and the below content will move up to show the content in an appealing manner without large gap.
Below is the code for dismissible alert:
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> Click on the "x" button on the right to close this alert box. </div>
Explanation of the classes and attributes used for creating alert with dismiss button:
- The close mar “X” is basically a button with “.close” class. This is to ensure the visual look is aligned properly on all devices.
- The button has “data-dismiss=”alert” attribute to trigger the JavaScript function for closing the alert.
- “×” is the HTML escape entity which will be rendered as “X” button on the browser.
- The “aria-label=”close” attribute is used to improve the accessibility for screen readers to indicate a close button.
- The class “.alert-dismissible” is used to create the required padding the right of the close button.
- Classes “.fade” and “.show” are used to create animation effects.
Using JavaScript for Dismiss
The alert box can be closed manually with the JavaScript trigger like below:
<div class="alert alert-success alert-dismissible" id="alert1">
<a href="#" class="close">×</a>
Click on the "x" button on the right to close this alert box.
</div>
<script>
var alertList = document.querySelectorAll('.alert') alertList.forEach(function (alert) { new bootstrap.Alert(alert) })
</script>
Bootstrap alert script has the following two events:
| Event | Description |
| close.bs.alert | This is triggered immediately when the close button is clicked. |
| closed.bs.alert | This is triggered when the alert is closed. |
Below is the code for creating alert when clicked on the close button.
<div class="alert alert-danger alert-dismissible" id="alert2">
<a href="#" class="close">×</a>
Click on the "x" button on the right to close this alert box.
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#alert2").alert("close");
});
$("#alert2").on('close.bs.alert', function(){
alert('The alert message is about to be closed.');
});
});
</script>
Similarly you can use “closed.bs.alert” event to trigger a popup when you close an alert.
Using Icons in Alerts
Glyphicons are not supported from Bootstrap 4, but you can use the Bootstrap icons, font awesome icons or any other SVG icons with alert component.
Using Bootstrap Icons
Version 5 comes with 1330+ in-built icons in SVG and web fonts format. This is the best option as it blends nicely with other elements. Below is an example of using Bootstrap icon with alert component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="alert alert-info" role="alert">
<i class="bi bi-check-circle-fill"></i>
This is a warning alert and <a href="#" class="alert-link">here is a link with warning color</a>.
</div>
</body>
</html>Below is how it will look on the browser.
Using Font Awesome with Bootstrap Alerts
Below are some of the examples of using font awesome icon with alert. Check out separate article on how to use font awesome icons with alerts.
Using Icon Image with Alerts
Hosting font icons on your own site might be a troublesome task. In such a case, instead of font icons you can use small images in front of the alert components like below.
Leave a Reply
Your email is safe with us.