WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Alerts


In this chapter we discuss Bootstrap Alerts

Alerts

Bootstrap supports to makes predefined alert messages:

× Warning! I am alert box and warning that might need attention
× Danger!I am alert box and dangerous action
× Success! I am alert box and successful action
× Info! I am alert box and informative action

Alerts can be created with the .alert class, you can use one various types of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:

Example

<div class="alert alert-success">
  <strong>Success!</strong> I am alert box and successful action .
</div>

<div class="alert alert-info">
  <strong>Info!</strong> I am alert box and informative action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> I am alert box and warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong>I am alert box and dangerous action action.
</div>
Try it Yourself »

Closing Alerts

You can close the alert message, by adding class="close" and data-dismiss="alert" to a link or a button element:

Example

<div class="alert alert-success">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> I am alert box and successful action.
</div>
Try it Yourself »

Animated Alerts

This alerts will help to .fade and .in classes adds a fading effect

Example

<div class="alert alert-success fade in">
Try it Yourself »