Alerts & Badges
Flash messages and inline status indicators.
Alerts
Base alert + four color variants — add .alert-icon to a leading SVG
Base: Use
.alert as the wrapper, then add your own colors.Info: This is an informational message.
Success! Your changes have been saved.
Warning: Please review before continuing.
Error: Something went wrong. Please try again.
<!-- Base wrapper -->
<div class="alert border-muted bg-white text-secondary-700">
<svg class="alert-icon">...</svg>
<div><b>Base:</b> Use the wrapper, then add your own colors.</div>
</div>
<!-- Variants: alert-info, alert-success, alert-warning, alert-danger -->
<div class="alert alert-info">
<svg class="alert-icon">...</svg>
<div><b>Info:</b> Message.</div>
</div>Badges
Base badge + seven color variants
Base
Primary
Success
Warning
Danger
Info
Gray
Dark
<span class="badge border-muted bg-white text-secondary-700">Base</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-gray">Gray</span>
<span class="badge badge-dark">Dark</span>Squared — add .badge-square
Primary
Success
Warning
Danger
Info
Gray
Dark
<span class="badge badge-primary badge-square">Primary</span>
<span class="badge badge-success badge-square">Success</span>
<span class="badge badge-warning badge-square">Warning</span>
<span class="badge badge-danger badge-square">Danger</span>
<span class="badge badge-info badge-square">Info</span>
<span class="badge badge-gray badge-square">Gray</span>
<span class="badge badge-dark badge-square">Dark</span>Large — add .badge-lg
Large pill
Large squared
<span class="badge badge-primary badge-lg">Large pill</span>
<span class="badge badge-success badge-lg badge-square">Large squared</span>With dot indicator — .badge-dot
Online
Overdue
Inactive
<span class="badge badge-success">
<span class="badge-dot bg-green-500"></span> Online
</span>