Bootstrap Alert

We can create different types of alerts messages using bootstrap predefined classes. Alert messages box are used to display quick attention to users like success, warning, errors, confirmation.


Bootstrap alerts can be created with the .alert class, followed by one of the four contextual classes 

  • .alert-success
  • .alert-info
  • .alert-warning 
  • .alert-danger:


<div class=”alert alert-success”>
  <strong>Success!</strong> Bootstrap Success Alert

<div class=”alert alert-info”>
  <strong>Info!</strong> Bootstrap Info Alert

<div class=”alert alert-warning”>
  <strong>Warning!</strong> Bootstrap Warning Alert

<div class=”alert alert-danger”>
  <strong>Danger!</strong>  Bootstrap Danger Alert


Closing Alerts


class=”close” and data-dismiss=”alert” – use to create close the alert message. 


<div class=”alert alert-warning”>
  <a href=”#” class=”close” data-dismiss=”alert” aria-label=”close”>&times;</a>
  <strong> Warning! </strong> Indicates a Warning!



Animated Alerts

.fade and .inuse to create fading effect when closing the alert message. 

<div class=”alert alert-success fade in”>


Close Bootstrap Alerts using JavaScript



Leave a Reply

Your email address will not be published. Required fields are marked *