Online

Bootstrap - Alerts

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

With Bootstrap you can easily create elegant alert messages box for various purposes. You can also add an optional close button to dismiss any alert.

Example :-

Result

Success! Well done its submitted.
Info! take this info.
Warning ! Dont submit this.
Error ! Change few things.

Warning Alerts

You can create a simple Bootstrap warning alert message box by adding the contextual class .alert-warning to the .alert base class, like this:

Example :-

Result

× Warning! There was a problem with your network connection.

Error or Danger Alerts

Add the class .alert-danger to the .alert base class to create error or danger alerts.

Example

Result

× Error! A problem has been occurred while submitting your data.

Success or Confirmation Alerts

Likewise, to create the success or confirmation alert message box add the contextual class .alert-success to the .alert base class.

Example

Result

× Success! Your message has been sent successfully.

Information Alerts

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

Example

Result

× Note! Please read the comments carefully.