Flash Messages
Bootstrap 5 Flash Messages component
Responsive Flash messages built with the latest Bootstrap 5. Flash messages provide contextual feedback information for typical user actions with a handful of responsible and flexible messages boxes.
Basic examples
Click the buttons to launch the flash messages.
A simple primary flash message with an example link. Give it a click if you like.
A simple secondary flash message with an example link. Give it a click if you like.
A simple success flash message with an example link. Give it a click if you like.
A simple danger flash message with an example link. Give it a click if you like.
A simple warning flash message with an example link. Give it a click if you like.
A simple info flash message with an example link. Give it a click if you like.
A simple light flash message with an example link. Give it a click if you like.
A simple dark flash message with an example link. Give it a click if you like.
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.
Static examples
Use .alert class, followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark to create an flash message.
A simple primary flash message—check it out!
A simple secondary flash message—check it out!
A simple success flash message—check it out!
A simple danger flash message—check it out!
A simple warning flash message—check it out!
A simple info flash message—check it out!
A simple light flash message—check it out!
A simple dark flash message—check it out!
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.
Icons
Use Font Awesome Icons to create flash messages with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
A simple primary flash message—check it out!
A simple secondary flash message—check it out!
A simple success flash message—check it out!
A simple danger flash message—check it out!
A simple warning flash message—check it out!
A simple info flash message—check it out!
A simple light flash message—check it out!
A simple dark flash message—check it out!
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.
Dismissing
Using the alert JavaScript plugin, it’s possible to dismiss any flash message inline. Here’s how:
- Be sure you’ve loaded the alert plugin or the compiled Bootstrap JavaScript.
- Add a close button and the
.alert-dismissibleclass, which adds extra padding to the right of the flash message and positions the close button. - On the close button, add the
data-mdb-dismiss="alert"attribute, which triggers the JavaScript functionality. Be sure to use thebuttonelement with it for proper behavior across all devices. - To animate flash messages when dismissing them, be sure to add the
.fadeand.show classes.
You can see this in action with a live demo:
Holy guacamole! You should check in on some of those fields below.
This is a mobile version of the documentation.
View this website on the desktop to copy & edit the source code of the component.