What are Bootstrap alerts and how do you make them dismissible?

Beginner

Answer

Alerts provide contextual feedback messages:

<!-- Basic alert -->
<div class="alert alert-warning" role="alert">
  This is a warning alert!
</div>

<!-- Dismissible alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error!</strong> Something went wrong.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Alert with additional content -->
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p class="mb-0">Success message with <a href="#" class="alert-link">a link</a>.</p>
</div>

Alert types: alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark.