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.

Edit in sandbox 
<!-- Trigger buttons -->
<button  type="button" data-mdb-button-init id="primary" data-mdb-ripple-init class="btn btn-primary m-1">Primary</button>
<button  type="button" data-mdb-button-init id="secondary" data-mdb-ripple-init class="btn btn-secondary m-1">Secondary</button>
<button  type="button" data-mdb-button-init id="success" data-mdb-ripple-init class="btn btn-success m-1">Success</button>
<button  type="button" data-mdb-button-init id="danger" data-mdb-ripple-init class="btn btn-danger m-1">Danger</button>
<button  type="button" data-mdb-button-init id="warning" data-mdb-ripple-init class="btn btn-warning m-1">Warning</button>
<button  type="button" data-mdb-button-init id="info" data-mdb-ripple-init class="btn btn-info m-1">Info</button>
<button  type="button" data-mdb-button-init id="light" data-mdb-ripple-init class="btn btn-light m-1">Light</button>
<button  type="button" data-mdb-button-init id="dark" data-mdb-ripple-init class="btn btn-dark m-1">Dark</button>

<!-- Alerts -->
<div
    data-mdb-alert-init class="alert fade"
    id="alert-primary"
    role="alert"
    data-mdb-color="primary"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple primary flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-secondary"
    role="alert"
    data-mdb-color="secondary"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple secondary flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-success"
    role="alert"
    data-mdb-color="success"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple success flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-danger"
    role="alert"
    data-mdb-color="danger"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple danger flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-warning"
    role="alert"
    data-mdb-color="warning"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple warning flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-info"
    role="alert"
    data-mdb-color="info"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple info flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-light"
    role="alert"
    data-mdb-color="light"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple light flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
    data-mdb-alert-init class="alert fade"
    id="alert-dark"
    role="alert"
    data-mdb-color="dark"
    data-mdb-position="top-right"
    data-mdb-stacking="true"
    data-mdb-width="535px"
    data-mdb-width="535px"
    data-mdb-append-to-body="true"
    data-mdb-hidden="true"
    data-mdb-autohide="true"
    data-mdb-delay="2000"
>
    A simple dark flash message with
    <a href="#" data-mdb-alert-init class="alert-link">an example link</a>. Give it a click if you like.
</div>
const triggers = [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
];
const basicInstances = [
  'alert-primary',
  'alert-secondary',
  'alert-success',
  'alert-danger',
  'alert-warning',
  'alert-info',
  'alert-light',
  'alert-dark',
];

triggers.forEach((trigger, index) => {
  let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
  document.getElementById(trigger).addEventListener('click', () => {
    basicInstance.show();
  });
});

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.

Edit in sandbox 
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="primary">
    A simple primary flash message—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="secondary">
    A simple secondar flash messaget—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="success">
    A simple success flash message—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="danger">
    A simple dange flash messaget—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="warning">
    A simple warning flash message—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="info">
    A simple info flash message—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="light">
    A simple light flash message—check it out!
</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="dark">
    A simple dark flash message—check it out!
</div>

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.

Edit in sandbox 
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="primary"><i class="fas fa-info-circle me-3"></i>A simple primary flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="secondary"><i class="fas fa-circle me-3"></i>A simple secondary flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="success"><i class="fas fa-check-circle me-3"></i>A simple success flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="danger"><i class="fas fa-times-circle me-3"></i>A simple danger flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="warning"><i class="fas fa-exclamation-triangle me-3"></i>A simple warning flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="info"><i class="fas fa-chevron-circle-right me-3"></i>A simple info flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="light"><i class="fab fa-gratipay me-3"></i>A simple light flash message—check it out!</div>
<div data-mdb-alert-init class="alert" role="alert" data-mdb-color="dark"><i class="fas fa-gem me-3"></i>A simple dark flash message—check it out!</div>

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-dismissible class, 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 the button element with it for proper behavior across all devices.
  • To animate flash messages when dismissing them, be sure to add the .fade and .show classes.

You can see this in action with a live demo:

Edit in sandbox 
<div data-mdb-alert-init class="alert alert-dismissible fade show" role="alert" data-mdb-color="warning">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="alert" aria-label="Close"></button>
</div>