Alerts
Basic alerts
Basic alerts use the.alert class with the following color variants:.alert-{primary|secondary|success|info|warning|danger|light|dark}.
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
Icon alerts use.alert combined with.alert-media and a contextual color:.alert-{primary|secondary|success|info|warning|danger|light|dark}.
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
Outline alerts use.alert-outline-{primary|secondary|success|info|warning|danger|light|dark} for subtle, low-emphasis messages.
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
Dismissible alerts use.alert-dismissible together with.alert-{context} and a close button.
Operation successful!
Something went wrong
Critical error detected
Here’s some information
Alerts with description
Alerts with extended content use.alert-media and.alert-body to support headings and descriptions.