Bootstrap Alerts

Bootstrap provides predefined alert messages use by some classes alert-success, .alert-info, .alert-warning or .alert-danger::

Example:-

 <div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Test it Now

Bootstrap Alert Links

Use alert-link class links inside the alert box to create "matching colored links".

Example:-

 <div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Test it Now

Bootstrap Closing Alerts

Close the alert message use the .alert-dismissible class.

To add the class="close" & data-dismiss="alert" to a link or a button element then alert box will disappear.

Example:-

  <div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Test it Now

Next TopicBootstrap Table Example

← prev next →

Bootstrap 4 Tuto

Bootstrap Alerts

Bootstrap Alert Links

Bootstrap Closing Alerts