Alerts
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.
Alerts
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.
Link Color
The
.alert-link
class can be applied to links within alerts to get contextual link stylying.
Dismissing
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.
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.
Well done!
You can use shadow and border utilities to style alerts in different ways. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Toasts
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
Bootstrap's alerts component documentation
Docs for Material's snackbar web component
Bootstrap's toasts documentation page