Alerts

Basic Alerts

Standard Bootstrap feedback messages using .alert-{color}.

<div class="alert alert-primary" role="alert">
  Basic alert message
</div>
Alerts with Action

Include buttons or links for immediate user interaction.

<div class="alert alert-info alert-media align-items-center" role="alert">
  <div class="alert-body d-flex justify-content-between">
    <span>Message</span>
    <button class="btn btn-sm btn-info">Action</button>
  </div>
</div>
Dismissible Alerts

Enable users to dismiss alerts with .alert-dismissible.

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Message
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>
Alert with Description

Use headings and paragraphs for more detailed messages.

<div class="alert alert-primary" role="alert">
  <h4 class="alert-heading">Title</h4>
  <p>Description text goes here.</p>
</div>
Important Alerts

Use .alert-important for high-visibility solid background alerts.

<div class="alert alert-important alert-primary" role="alert">
  Important announcement
</div>
Minor Alerts

Compact messages using .alert-minor for less intrusive feedback.

<div class="alert alert-minor alert-secondary" role="alert">
  Minor feedback message
</div>