Bootstrap 4 provides an easy way to create contextual feedback messages with its alerts component. Alerts are available for any length of text, as well as an optional dismiss button inside of it.

To create an alert message, add .alert class to <div> element along with one of the eight required contextual classes (.alert-*) to specify the kind of alert. These contextual classes include .alert-primary, .alert-secondary, .alert-info, .alert-warning, .alert-danger, .alert-light, and .alert-dark.

Following is the markup for the above example:

<div class="alert alert-primary" role="alert">
  <strong>Primary!</strong> An important primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  <strong>Secondary!</strong> A less important secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  <strong>Success!</strong> A positive success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  <strong>Danger!</strong> A potentially dangerous alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> A warning alert that might need attention—check it out!
</div>
<div class="alert alert-info" role="alert">
  <strong>Info!</strong> A neutral info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  <strong>Light!</strong> A less important light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  <strong>Dark!</strong> A simple dark alert—check it out!
</div>

Alert Links

You can use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-primary" role="alert">
  Hey! <a href="#" class="alert-link">Sign up</a> for our weekly newsletter.
</div>

Dismissible Alerts

It is possible to dismiss any alert using alert JavaScript plugin provided by Bootstrap 4. To enable any alert message to dismiss, add .alert-dismissible class to <div> element. Then add class="close" and data-dismiss="alert" to a link or a button element inside the alert container. When you click on this button, the alert box will disappear and will be completely removed from the DOM.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Holy There!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

The .fade and .show classes are added to animate the fading affect when the alert message is dismissed.