Bootstrap Alerts

Advertisements


This chapter will discuss about alerts and the classes Bootstrap provides for alerts. Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.

You can add an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin.

You can add an basic alert by creating a 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>
Alert Demo

Dismissal Alerts

To build a dismissal alert:

  • Add an basic alert by creating a 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)

  • Also add optional .alert-dismissable to the above <div> class.

  • Add a close button.

Following example demonstrates this:

<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.
Dismissal Alert Demo

Links in Alerts

To get links in alerts:

  • Add an basic alert by creating a 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)

  • 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>
Links In Alert Demo


Advertisements
Advertisements