02.06.2015 Views

Bootstrap Tutorial

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

CHAPTER<br />

27<br />

<strong>Bootstrap</strong> Alerts<br />

This chapter will discuss about alerts and the classes <strong>Bootstrap</strong> provides for alerts. Alerts provide a way to<br />

style messages to the user. They provide contextual feedback messages for typical user actions.<br />

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

You can add an basic alert by creating a wrapper and adding a class of .alert and one of the four contextual<br />

classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger). The following example demonstrates<br />

this:<br />

Success! Well done its submitted.<br />

Info! take this info.<br />

Warning ! Dont submit this.<br />

Error ! Change few things.<br />

Dismissal Alerts<br />

To build a dismissal alert:<br />

<br />

<br />

<br />

Add an basic alert by creating a wrapper and adding a class of .alert and one of the four contextual<br />

classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger)<br />

Also add optional .alert-dismissable to the above class.<br />

Add a close button.<br />

TUTORIALS POINT<br />

Simply Easy Learning

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!