Alert

Bootstrap Simple Alert

Bootstrap provides an easy way to create predefined alert messages. Alerts are created with the .alert class, followed by one of the eight contextual classes .alert-primary, .alert-success, .alert-info, .alert-warning, .alert-secondary, .alert-light, .alert-dark or .alert-danger. Use .alert-link utility to quickly provide matching colored links within any alert.

Bootstrap Alert with Close Button

Bootstrap Alerts are available with an optional close button. Add .alert-dismissible class to parent div and .close class and data-dismiss="alert" attribute to the button element. Additional content like headings, paragraphs and divider can be added to the alerts.

Propeller Alert

Unlike other Propeller components, Alert is independent of Bootstrap HTML structure.

In Material Design language, alert is known as Snackbar and Toast .

To specify the position of the alert component, use data-positionX (x-axis positioning with left, right, and center as values.) and data-positionY (y-axis positioning with top and bottom as values.) attributes. To customize the visibility time of alert on screen, use data-duration attribute with a numeric value. To animate the alerts use data-effect attribute (with fadeInUp and fadeInDown values). To add message in the alert, use data-message attribute.

Propeller Alert with Action

This type of Alert comes with an action which is to be performed on the alert message. Along with Propeller Alert HTML, use additional attributes - data-action (with true and false value) and data-action-text (with user defined value) to add an action to the alert.

Propeller Alerts with Basic Notification Types

These are simple Propeller Alerts with an additioinal attribute - data-type with predefined eight values - alert-success, alert-info, alert-warning or alert-danger, alert-primary, alert-secondary, alert-light, alert-dark to create alerts with notification types.