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" id="primary" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary m-1">Primary</button>
            <button type="button" id="secondary" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary m-1">Secondary</button>
            <button type="button" id="success" data-mdb-button-init data-mdb-ripple-init class="btn btn-success m-1">Success</button>
            <button type="button" id="danger" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger m-1">Danger</button>
            <button type="button" id="warning" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning m-1">Warning</button>
            <button type="button" id="info" data-mdb-button-init data-mdb-ripple-init class="btn btn-info m-1">Info</button>
            <button type="button" id="light" data-mdb-button-init data-mdb-ripple-init class="btn btn-light m-1">Light</button>
            <button type="button" id="dark" data-mdb-button-init 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>