Alerts provide contexutal feedback messages for typical user actions. Alternatively, toasts are smaller alerts that are lightweight push notifications to notify users of actions they have taken.


Since there is no specifications for Material Design alerts, the default style closely resembles the Bootstrap default alerts.

Default Alerts

In Material Admin Pro, the color system has been changed to match the color system with this theme, and the font size and letter spacing has been adjusted to match Material Design standards.


Bootstrap supports dismissing alerts using JavaScript behavior. In the example below, the close button is used with the data-bs-dismiss="alert" attribute to enable this behavior.

For more information on using the JavaScript behavior built into Bootstrap, visit Bootstrap's alert documentation page.

Additional Content

Alerts support additional content, like the .alert-heading class being applied to headings within alerts. You can also style alerts using utility classes available with this toolkit to achieve variations on the alert dialog.


Since the functionality of Bootstrap's toast notifications are similar to Material Design's snackbar, the snackbar web component has been included for use within this toolkit.

In addition, Bootstrap's default toast component has been restyled to match Material Design's snackbar specifications as closely as possible for users who want to use the more familiar Bootstrap toast markup and JavaScript behavior.

Material Snackbar

The snackbar web component from the Material Web Components Catalog has been utilized in this case to add Material's snackbar component specifications to this theme in an easy, reusable fashion.

The onclick event is being used in this case to activate the snackbar notification, so no additional JavaScript is needed. Two positions are included within the web component configuration and a default and stacked variant.


Bootstrap Toasts

The styling for the default Bootstrap toasts has been modified to match Material's specifications for their snackbar component. Bootstrap's toast also supports a toast header, and different background and text color combinations.

Additional options for toasts are available on Bootstrap's toasts documentation page.

Bootstrap Toasts Usage

Bootstrap uses their positioning utilities to set the placement of the toast component. There are nine different positions available for Bootstrap toasts.

Note that in order to use Bootstrap toasts, you must enable them via JavaScript. For performance reasons, this component is opt-in only. See the JavaScript tab for an example of implementing functioning toasts.

Related Links