Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

Bootstrap Alerts


Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.

Alerts are created with the .alert class, followed by one of the four contextual classes i.e.

  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
<div class="alert alert-success">
  <strong>Success!</strong>
</div>

<div class="alert alert-info">
  <strong>Info!</strong>
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong>
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong>
</div>

Alert Links

Add the alert-link class to any links inside the alert box to create "matching colored links":

<div class="alert alert-success">
  <strong>Success!</strong><a href="#" class="alert-link">Read More</a>.
</div>
<div class="alert alert-info">
  <strong>Success!</strong><a href="#" class="alert-link">Read More</a>.
</div>
<div class="alert alert-warning">
  <strong>Success!</strong><a href="#" class="alert-link">Read More</a>.
</div>
<div class="alert alert-danger">
  <strong>Success!</strong><a href="#" class="alert-link">Read More</a>.
</div>

Closing Alerts

To close the alert message, add a .alert-dismissable class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

<div class="alert alert-success alert-dismissable">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">x</a>
  <strong>Success!</strong>
</div>