Alerts & Badges

Alerts

<div class="alert alert-primary" role="alert">This is a primary alert.</div>
<div class="alert alert-success" role="alert">This is a success alert.</div>
<div class="alert alert-warning" role="alert">This is a warning alert.</div>
<div class="alert alert-danger" role="alert">This is a danger alert.</div>

Dismissible Alert

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> Something needs your attention.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Badges

Primary Success Info Warning Danger Secondary 
<span class="badge bg-gradient-primary">Primary</span>
<span class="badge bg-gradient-success">Success</span>
<span class="badge bg-gradient-info">Info</span>
<span class="badge bg-gradient-warning">Warning</span>
<span class="badge bg-gradient-danger">Danger</span>

Usage Guidelines

  • Use alerts for important messages that require user attention
  • Always include role="alert" for accessibility
  • Use dismissible alerts for non-critical messages
  • Use badges for status indicators, counts, and labels
  • Prefer gradient badges (bg-gradient-*) for visual consistency
On this page