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.
Success!
Thank you for contacting us.
Error!
Something terrible happened.
Warning!
You closed your account on 15th December 2017 08:00pm.
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
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.