Bootstrap Alert Plugin

Introduction

Bootstrap is one of the most popular CSS frameworks for developing responsive websites.

Bootstrap provides us with easy ways to style websites, and it is significantly less verbose. 

In this article, we will discuss the alert plugin available in Bootstrap’s .alert class. We will learn about the usage of alert plugins.

We will also learn about the usage, methods and events when working with Bootstrap and also see about its implementation.

Bootstrap Alert Plugin

Alert messages are mostly used to display information such as warning or confirmation messages to the end-users. You can add dismiss functionality to all alert messages using the alert message plugin.

If we want to include this plugin functionality individually, then we will need alert.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, we can include bootstrap.js or the minified bootstrap.min.js.

Usage

Firstly, we will have a look at the implementation of alerts in Bootstrap. We will use .alert class to implement alerts in bootstrap.

<div class="alert alert-primary" role="alert">
 This is a primary alert—check it out!
</div>

Output

You can enable dismissal of an alert in the following two ways −

• Via data attributes − To dismiss via Data API just add data-dismiss = "alert" to your close button to automatically give an alert close functionality.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
 &times;
</a>

• Via JavaScript − To dismiss via JavaScript use the following syntax −

$(".alert").alert()

Example

The following example demonstrates the use of alert plugin via data attributes.

<div class = "alert alert-success">
 <a href = "#" class = "close" data-dismiss = "alert">
    &times;
 </a>
  <strong>Warning!</strong> There was a problem with your network connection.
</div>

Output

Methods

The following are some useful methods for the alert plugins −

To enable alerts to animate out when closed, make sure they have the .fade and .in class already applied to them.

Example

The following example demonstrates the use of .alert() method −

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
  <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
  <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
  <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
  <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
  $(function(){
     $(".close").click(function(){
        $("#myAlert").alert();
     });
  }); 
</script>

The following example demonstrates the use of .alert('close') method −

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
  <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
  <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
  <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
  <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
  $(function(){
     $(".close").click(function(){
        $("#myAlert").alert('close');
     });
  }); 
</script>  

You can see that the close functionality is applied to all the alert messages i.e. close any alert message, rest of the alert messages also gets closed.

Events

Below mentioned are the events to work with alert plugin. This event may be used to hook into the alert function.

Close.bs.alert

This event fires immediately when the close instance method is called.

Syntax

$('#myalert').bind('close.bs.alert', function () {
 // do something
})

Closed.bs.alert

This event is fired when the alert has been closed (will wait for CSS transitions to complete).

Syntax

$('#myalert').bind('closed.bs.alert', function () {
 // do something
})

Example

The following example demonstrates the alert plugin events −

<div id = "myAlert" class = "alert alert-success">
 <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
 <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
 $(function(){
    $("#myAlert").bind('closed.bs.alert', function () {
       alert("Alert message box is closed.");
    });
 });
</script>

Output

Frequently Asked Questions (FAQs)

1. What are alerts in Bootstrap?
   Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
    
2. What are alert plugins in Bootstrap?
   By using the alert message plugin we can add dismiss functionality to all alert messages.

Key Takeaways

We have learned about the various types of alerts in Bootstrap. We also learned about the  alert plugins in Bootstrap. We also learned about the different methods and events of the alert plugin in Bootstrap. This article also explained the implementation of about the usage of alert plugin available in Bootstrap.

For more information about the react framework for frontend development, get into the entire Frontend web development course.

Happy Learning!