Alerts
Basic alerts
Use.alert
with contextual classes for basic messages.
This is a primary alert — check it out!
This is a secondary alert — check it out!
This is a success alert — check it out!
This is an info alert — check it out!
This is a warning alert — check it out!
This is a danger alert — check it out!
This is a light alert — check it out!
This is a dark alert — check it out!
Alerts with icon
Add.alert-media
to combine an icon with alert content.
Primary alert with icon
Secondary alert with icon
Success alert with icon
Info alert with icon
Warning alert with icon
Danger alert with icon
Light alert with icon
Dark alert with icon
Outline alerts
Use.alert-outline-*
for subtle transparent alerts.
Outline primary alert
Outline secondary alert
Outline success alert
Outline info alert
Outline warning alert
Outline danger alert
Outline light alert
Outline dark alert
Dismissible alerts
Add.alert-dismissible
with a close button.
Operation successful!
Something went wrong
Critical error detected
Here’s some information
Alerts with description
Build on.alert-body
with headings, links, or extra content.