Alerts are extremely important to communicate messages with your website users. They stand out, bright and distinguished from the rest of the page elements. You should not mistake these alerts with the alert windows in browsers. These alerts are HTML elements designed to behave like an alert.

A simple alert markup is shown in the following code:

<div class="alert alert-success">Message sent!</div>

This produces the following result in a browser:

Alerts come with four different color variants:

The preceding alert is not dismissible. To display a cross button at the right edge of the alert and to add the dismiss option, you need to follow the given markup:

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" >
    &lt...