Alerts

You can create alerts using the .alert class combined with a contextual modifier class to provide colour (e.g. .alert-info).

<!-- Primary Alert -->
<div class="alert alert-primary" role="alert">
  <strong>Primary!</strong> This is an primary alert.
</div>

<!-- Secondary Alert -->
<div class="alert alert-secondary" role="alert">
  <strong>Secondary!</strong> This is an secondary alert.
</div>

<!-- Info Alert -->
<div class="alert alert-info" role="alert">
  <strong>Info!</strong> This is an info alert.
</div>

<!-- Success Alert -->
<div class="alert alert-success" role="alert">
  <strong>Success!</strong> This is an success alert.
</div>

<!-- Warning Alert -->
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> This is an warning alert.
</div>

<!-- Danger Alert -->
<div class="alert alert-danger" role="alert">
  <strong>Danger!</strong> This is an danger alert.
</div>

Dismissable Alerts

You can also create dismissible alerts by adding the .alert-dismissible class to the alert and inserting a close button. Here is an example.

<!-- Info Dismissible Alert -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Hey!</strong> I think you should know <a href="#">this</a>.
</div>

Make sure you check out the official Bootstrap 4 documentation for more information on alert components.