Alerts

Bootstrap 5.3 .alert components: contextual colors, subtle surfaces, dismissible regions, icons, headings, and links. Toggle the navbar theme — alerts use Bootstrap CSS variables and stay legible in light and dark mode.

Bootstrap-native markup

Use role="alert" for static messages, or role="status" / aria-live="polite" for low-urgency updates. Dismissible alerts pair .alert-dismissible with .btn-close and data-bs-dismiss="alert".

Alerts docs

Contextual — solid

Classes .alert-primary through .alert-dark map to Bootstrap theme tokens and update with data-bs-theme.

Primary. Main call-to-action or brand emphasis.

Secondary. Neutral supporting information.

Success. Operation completed without errors.

Danger. Blocking error or destructive consequence.

Warning. Review before you continue.

Info. Helpful context that is not an error.

Light. Low-contrast surface; pair with .border if needed.

Dark. Inverts well on light pages; in dark mode Bootstrap adjusts contrast.

Subtle — bg + border utilities

Combine .alert with .bg-*-subtle, .border-*-subtle, and .text-*-emphasis for softer panels (no duplicate alert-* class).

Primary subtle — migrations, tips, or low-noise highlights.

Success subtle — confirmations that should not dominate the layout.

Danger subtle — validation summary or risk callout.

Warning subtle — maintenance windows or deprecations.

Info subtle — release notes or documentation links.

Secondary subtle — metadata or secondary workflow hints.

Dismissible + fade

Add .fade .show for opacity transition when dismissed. Each alert needs a unique id if you re-show via JavaScript.

Saved. Your preferences were updated.

Session expires in 5 minutes.

Try the new dashboard — What’s new

Neutral dismissible using body tokens for dark/light parity.

Headings, divider, extra content

.alert-heading inherits alert color; use .alert-link for weighted links inside the same region.

Payment method

We accept cards and ACH. Enterprise customers can request invoicing.

Questions? Read billing FAQ or contact finance.

Icons + flex layout

Use d-flex with gap-2 / gap-3 so icons align with multi-line copy.

Upload failed. The file exceeded the 25 MB limit. Compress the archive or split it into smaller parts.

Deployed. Version 2.4.1 is live in production.

Action required. Two-factor authentication is not enabled on this account.

Lists & badges

Stack ul / ol or badges inside the alert body; spacing uses Bootstrap utilities.

Pre-launch checklist 3 left

DNS cutover scheduled
Smoke tests passing
Rollback playbook linked in runbook

Pricing updates for Q2 Draft

Inline actions

Pair alerts with .btn groups; use flex-wrap on narrow viewports.

Cookie notice. We use essential and analytics cookies.

Border accent + rounded scale

.border-start with .border-4 creates a vertical emphasis bar; combine with rounded-3 / shadow-sm for card-like callouts.

Health check passed all regions.

Degraded

Elevated latency in eu-west.

Outage

Failover in progress; ETA 12 min.

Stacked full-width (form / page banner)

Use .w-100 inside a column or place alerts above main for global notices.

Maintenance tonight 02:00–03:00 UTC. Read-only mode may apply. Status page

Payment declined. Update your card on file to avoid service interruption.