BS5 Alerts

Basic alert

<div class="alert alert-primary" role="alert">
  This is a primary alert
</div>

Alert variants

<div class="alert alert-success">Success</div>
<div class="alert alert-danger">Error</div>
<div class="alert alert-warning">Warning</div>
<div class="alert alert-info">Info</div>

Dismissible alerts

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning message
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Alert with heading

<div class="alert alert-success">
  <h4 class="alert-heading">Well done!</h4>
  <p>You successfully read this alert message.</p>
</div>

Best practices

• Use contextual colors correctly
• Do not overuse alerts
• Always include meaningful content