Table of contents
1.
Introduction
2.
Bootstrap Alert Plugin
3.
Types of Alerts
3.1.
Data Attributes
3.2.
Javascript
4.
Methods 
4.1.
.alert()
4.2.
.alert('close')
5.
Events
5.1.
close.bs.alert
5.2.
closed.bs.alert
6.
Frequently Asked Questions
6.1.
What is an alert in Bootstrap?
6.2.
What are alert plugins in Bootstrap?
6.3.
What is included in the Bootstrap bundle?
6.4.
Define a Bootstrap host.
6.5.
Is Bootstrap a framework or a library?
7.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap Alert Plugin

Author Sagar Mishra
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Hey Ninjas! You must have heard about the Bootstrap framework in your programming world. While styling any web page, we need alerts to show the critical message to the user. Do you know how to add these alerts? If not, then welcome to the Bootstrap alert plugins blog.

Bootstrap Alert Plugin

We will discuss the Bootstrap alert plugins in detail. Let's start without wasting time.

Bootstrap Alert Plugin

Bootstrap logo

Alert plugins display information such as warning or success messages to the users. Using the alert message plugin, you can add the dismiss feature to all alert messages. Alert.js is required if you want to include this plugin's functionality individually. Else, you can include bootstrap.js, as mentioned in the Bootstrap Alerts blog.

Types of Alerts

Types of Alerts

Let's take a quick working example for the danger alert using the ‘.alert’ class.

<!DOCTYPE html>
<html>
    <head>
        <meta chrset="UTF 8" />
        <title>Bootstrap Alert Plugis</title>
        <meta name="viewport", initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        </br><h2>Bootstrap Alerts Example</h2>
        <div class="alert alert-danger" role="alert">This is a Danger Alert!</div>
    </body>
</html>

 

Output:

Types of Alerts example

The above output is an example of a danger alert. The danger alert has a fixed colour, which is Red.

We can also remove these kinds of alerts using the dismiss alert. The dismiss alert adds extra padding on the right corner and a ".close" button.

There are mainly two types to enable the dismiss alerts. 

 types of dismiss alerts

Data Attributes

To close the functionality of dismissing using data attributes, you can set data-bs-dismiss = "alert" to your close button.

Let's take an example of data attributes.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" />
        <title>Bootstrap Alert Plugin</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        </br><h2>My Bootstrap Alerts</h2>
        <div class="m-1">
            <div class="alert alert-warning alert-dismissible fade show">
                <strong>Warning Alert!</strong> Please fix this warning.
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="alert">
                </button>
            </div>
        </div>
    </body>
</html>

 

Output:

data attribute output

As you can see in the output, the dismissing alert added a cross (x) on the rightmost corner of the given alert so the user can remove the alert from the screen if they want.

Javascript

To automatically close the functionality to dismiss using Javascript, add $("alert").alert() to your close button.

Let's take a look at the example given below.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Bootstrap Alert Plugin</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"/>
        <script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
    </head>

    <body>
        <h4>Bootstrap Dismissal Alert</h4>
        <div class="alert alert-success alert-dismissible fade show mx-1 mt-1 border border-success"
            role="alert">
            <b>Successfull! Congratulations, you learnt how to show a dismissal alert in bootstrap</b>
            <button
                type="button"
                class="btn bg-warning ml-4"
                onclick="onButtonPress()">
                &times;
            </button>
        </div>

        <script>
            function onButtonPress() {
                $(".alert").alert("close");
            }
        </script>
    </body>
</html>

 

Output:

Javascript output

We can dismiss the warning alert by clicking on the cross button in the right corner.

Methods 

In Bootstrap alert plugins, there are two methods which are mentioned below. Let's discuss them.

  1. .alert() method
  2. .alert('close') method

.alert()

The .alert() method wraps all alerts with a close functionality. In simpler words, it will add a close icon (x) to the alert. Let's check this out using an example.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Alert Plugin</title>
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>.alert() Method Example</h2>
            <div class="alert alert-danger alert-dismissible" id="myAlert">
                <a href="#" class="close">&times;</a>
                <strong>Danger ahead!</strong> Please fix this issue to move forward.
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $(".close").click(function () {
                    $("#myAlert").alert();
                });
            });
        </script>
    </body>
</html>

 

Output:

.alert() output

You can see the cross button in the above output, but it will not work by just using the .alert() method. We have to give a few more directions to the model. Let's check those directions in the next section.

.alert('close')

The .alert('close') method will enable the function of the cross button to close the alert message. Let's check the code. We will use the same example used in the .alert() method for better understanding.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Alert Plugin</title>
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>.alert('close') Method Example</h2>
            <div class="alert alert-danger alert-dismissible" id="myAlert">
                <a href="#" class="close">&times;</a>
                <strong>Danger ahead!</strong> Please fix this issue to move forward.
            </div>
        </div>

        <script>
            $(document).ready(function () {
                $(".close").click(function () {
                    $("#myAlert").alert("close");
                });
            });
        </script>
    </body>
</html>

 

Output:

.alert('close') output

Now, you will able to remove the alerts by clicking on the close button.

Events

Bootstrap modal events are a collection of Javascript that enable you to start Bootstrap modals in response to a user action. There are two types of events which are mentioned below.

Events

close.bs.alert

The close.bs.alert event occurs instantly when the close instance method is called. Let's take a look at the example given below.

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Alert Plugins</title>
        <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/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h3>Bootstrap Alert Events Example</h3>
        <div>
            <div id="myAlert" class="alert alert-warning">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please fix this issue.
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myAlert").bind("close.bs.alert", function () {
                    alert("Click 'Ok' to close the alert message.");
                });
            });
        </script>
    </body>
</html>

 

Output:

close.bs.alert output

A popup will come with a message after clicking the close button, as shown in the output.

closed.bs.alert

The close.bs.alert event waits for the CSS to complete the transition, then occurs and closes the alert. Let's take a look at the example given below.

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Alert Plugins</title>
        <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/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h3>Bootstrap Alert Events Example</h3>
        <div>
            <div id="myAlert" class="alert alert-warning">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Warning!</strong> Please fix this issue.
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myAlert").bind("closed.bs.alert", function () {
                    alert("Click 'Ok' to close the alert message.");
                });
            });
        </script>
    </body>
</html>

 

Output:

closed.bs.alert output

Both examples of the events are the same. The only difference is closed.bs.alert waits for the CSS transition to over, but the close.bs.alert dismiss the alert message instantly after clicking the close button.

Frequently Asked Questions

What is an alert in Bootstrap?

Alert offers contextual feedback messages for typical user actions with a handful of available and flexible alert messages.

What are alert plugins in Bootstrap?

Using the alert message plugin, you can add a dismiss feature to all alert messages.

What is included in the Bootstrap bundle?

The Bootstrap bundle contains CSS files, Javascript files, Bootstrap source code, Precompiled Bootstrap, etc.

Define a Bootstrap host.

A Bootstrapping host is a node in an overlay network that gives new joining nodes the relevant config data so they can join the overlay network safely.

Is Bootstrap a framework or a library?

Bootstrap is a CSS framework for creating responsive and mobile websites.

Conclusion

This article discusses the topic of the Bootstrap Alert Plugin. In detail, we have seen the definition of the Bootstrap alert plugin, types of alerts, implementation, methods, events, and types.

We hope this blog has helped you enhance your knowledge of the Bootstrap Alert Plugin. If you want to learn more, then check out our articles.

And many more on our platform Coding Ninjas Studio.

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problemsinterview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning!

Live masterclass