Bootstrap Alerts

In this tutorial we will discuss about alerts and the classes Bootstrap provides for alerts. Alerts are the best way to indicate the user regarding any action. They provide contextual feedback messages for typical user actions. You can also add an optional close icon to alert. For inline dismissal, use the Alerts jQuery plugin.

Add basic alert with wrapper <div> and adding a class of .alert and one of the four contextual classes e.g., .alert-success, .alert-info, .alert-warning, .alert-danger. The following example demonstrates this:

<div class="alert alert-success">Success! Well done its submitted.</div>
<div class="alert alert-info">Info! take this info.</div>
<div class="alert alert-warning">Warning ! Dont submit this.</div>
<div class="alert alert-danger">Error ! Change few things.</div>

Demo

Dismissal Alerts

Follow these steps to make a dismissal alert:

• 
  

  Create a wrapper <div> with class name .alert and also one of the four contextual classes e.g., .alert-success, .alert-info, .alert-warning, .alert-danger.

  
  


• 
  

  Then add another optional class .alert-dismissable to the above <div> class.

  
  


• 
  

  Finaly add the close button in the div.

  
  

<div class="alert alert-success alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
 aria-hidden="true">
 &times;
 </button>
 Success! Well done its submitted.
</div>
<div class="alert alert-info alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
 aria-hidden="true">
 &times;
 </button>
 Info! take this info.
</div>
<div class="alert alert-warning alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
 aria-hidden="true">
 &times;
 </button>
 Warning ! Dont submit this.
</div>
<div class="alert alert-danger alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
 aria-hidden="true">
 &times;
 </button>
 Error ! Change few things.
</div>

Be sure to use the <button> element with the data-dismiss=”alert” data attribute.

Demo

Links in Alerts

If you need to get links in alerts follow these steps:

• 
  

  Create a wrapper <div> with class name .alert and also one of the four contextual classes e.g., .alert-success, .alert-info, .alert-warning, .alert-danger.

  
  


• 
  

  Use the .alert-link utility class to quickly provide matching colored links within any alert.

  
  

<div class="alert alert-success">
 <a href="#" class="alert-link">Success! Well done its submitted.</a>
</div>
<div class="alert alert-info">
 <a href="#" class="alert-link">Info! take this info.</a>
</div>
<div class="alert alert-warning">
 <a href="#" class="alert-link">Warning ! Dont submit this.</a>
</div>
<div class="alert alert-danger">
 <a href="#" class="alert-link">Error ! Change few things.</a>
</div>

Demo

Bootstrap Alerts