Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Alerts use a flex layout with icons, body text, and an optional dismiss button.
Success! A simple primary alert—check it out!
Success! A simple success alert—check it out!
Something's wrong! A simple danger alert—check it out!
Info A simple info alert—check it out!
Alert! A simple warning alert—check it out!
Alerts with CTA
Alerts can include call-to-action buttons within the alert body.
Success! A simple success alert—check it out!
Something's wrong! A simple danger alert—check it out!
Info A simple info alert—check it out!
Alert! A simple warning alert—check it out!
Block Alerts
Use the .alert-block class to make alerts appear as a block element.
A simple alert with an example link.
A simple alert with an example link.
A simple alert with an example link.
A simple alert with an example link.
Dismissible Alerts
Add the .alert-dismissible class and a close button for inline
dismissal.
Holy guacamole! You should check in on some
of those fields below.
Slide-Dismiss Alerts
Use .alert-slide-container and data-dismiss-slide="alert" for a sliding dismiss animation.