Twitter Bootstrap Alerts

Creating Alert Messages with Twitter Bootstrap

Alert messages are used quite often to stand out the information that requires immediate attention of the end users such as warning or confirmation messages.

Warning Alerts

You can create a simple warning alert message using the class .alert. You can also add an optional dismiss button to close the alert message box.

Example

Try this code »

• 
  

  <div 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>

  
  

— The output of the above example will look something like this:

— Similarly you can create other alert messages.

Error or Danger Alerts

You can create error or danger alert messages by adding an extra class .alert-error to the .alert base class.

Example

Try this code »

• 
  

  <div class="alert alert-error">

  
  


• 
  

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

  
  


• 
  

   <strong>Error!</strong> A problem has been occurred while submitting your data.

  
  


• 
  

  </div>

  
  

— The output of the above example will look something like this:

---

Success or Confirmation Alerts

To create success or confirmation alert messages add an extra class .alert-success to the .alert base class.

Example

Try this code »

• 
  

  <div class="alert alert-success">

  
  


• 
  

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

  
  


• 
  

   <strong>Success!</strong> Your message has been sent successfully.

  
  


• 
  

  </div>

  
  

— The output of the above example will look something like this:

---

Information Alerts

For information alert messages add an extra class .alert-info to the .alert base class.

Example

Try this code »

• 
  

  <div class="alert alert-info">

  
  


• 
  

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

  
  


• 
  

   <strong>Note!</strong> Please read the comments carefully.

  
  


• 
  

  </div>

  
  

— The output of the above example will look something like this:

---

Dismiss Alerts via Data Attribute

Data attributes provides an easy way to enable close functionality of an alert message box — just add data-dismiss="alert" to the close button and it will automatically enable the dismissal of an alert message box.

Example

Try this code »

• 
  

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

  
  


• 
  

  <button type="button" class="close" data-dismiss="alert">&times;</button>

  
  


• 
  

  <span class="close" data-dismiss="alert">&times;</span>

  
  

---

Dismiss Alerts via JavaScript

You may also enable the dismissal of an alert via JavaScript.

Example

Try this code »

• 
  

  <script type="text/javascript">

  
  


• 
  

  $(document).ready(function()

  
  


• 
  

   $(".close").click(function()

  
  


• 
  

   $("#myAlert").alert();

  
  


• 
  

   );

  
  


• 
  

  );

  
  


• 
  

  </script>

  
  

---

Methods

These are the standard bootstrap’s alerts methods:

$().alert()

This method wraps all alerts with close functionality.

Example

Try this code »

• 
  

  <script type="text/javascript">

  
  


• 
  

  $(document).ready(function()

  
  


• 
  

   $(".close").click(function()

  
  


• 
  

   $(".alert").alert();

  
  


• 
  

   );

  
  


• 
  

  );

  
  


• 
  

  </script>

  
  

Tip: If you to want to enable transition in your alert messages box while closing, make sure you have already applied the class .fade and .in to them.

$().alert(‘close’)

This method closes an alert message box.

Example

Try this code »

• 
  

  <script type="text/javascript">

  
  


• 
  

  $(document).ready(function()

  
  


• 
  

   $(".close").click(function()

  
  


• 
  

   $("#myAlert").alert('close');

  
  


• 
  

   );

  
  


• 
  

  );

  
  


• 
  

  </script>

  
  

---

Events

Bootstrap’s alert class includes few events for hooking into alert functionality.

Event	Description
close.bs.alert	This event fires immediately when the close instance method is called.
closed.bs.alert	This event is fired when the alert message box has been closed. It will wait until the CSS transition process has been fully completed before getting fired.

The following example displays an alert message to the user when fade out transition of an alert message box has been fully completed.

Example

Try this code »

• 
  

  <script type="text/javascript">

  
  


• 
  

  $(document).ready(function()

  
  


• 
  

   $("#myAlert").on('closed.bs.alert', function () 

  
  


• 
  

   alert("Alert message box has been closed.");

  
  


• 
  

   );

  
  


• 
  

  );

  
  


• 
  

  </script>

  
  

Twitter Bootstrap Alerts