Alert
Bootstrap 4 Alert with Material Design UI
Alert is used to provide contextual feedback messages for typical user actions with the handful of available and flexible messages.
Bootstrap 4 Alert
Bootstrap 4 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 4 Alert with Close Button
Bootstrap 4 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. We have successfully received your email and someone from the customer service team will get back to as soon as possible.
Propeller Alert
Unlike other Propeller components, Alert is independent of Bootstrap 4 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.
Alert Top
Alert Bottom
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.
Alert Top
Alert Bottom
Propeller Alerts with Basic Notification Types
These are simple Propeller Alerts with an additioinal attribute - data-type with predefined eight values - success, info, warning or danger, primary, secondary, light, dark to create alerts with notification types.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the Alert. The table lists the available classes and their effects.
| HTML Attributes | Effect | Value |
|---|---|---|
data-positionX |
Defines the position of Alert horizontally. | left, right, center |
data-positionY |
Defines the position of Alert vertically. | top, bottom |
data-type |
Defines the type of Data in the alert box. | info, warning, success, error, primary, secondary, light, dark |
data-effect |
Defines the type of animation while showing the alert. | fadeInUp, fadeInDown |
data-action |
Required when your alert demands user to perform some action. | true, false |
data-action-text |
Defines the action that needs to be performed. | Close, Refresh, Ok, etc. |
data-duration |
Customizes the visibility time of alert on the screen. | Numeric value |
data-message |
Defines the message that will be displayed in the alert. | Text |
jQuery plugin
Call the jQuery plugin to initialize the Alert while fetching the data dynamically.
Bootstrap 4 Methods
See here for more documentation on this.
| Method | Description |
|---|---|
$().alert() |
Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.) |
$().alert('close') |
Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. |
$().alert('dispose') |
Destroys an element’s alert. |
Bootstrap 4 Events
Bootstrap 4's alert plugin exposes a few events for hooking into alert functionality. See here for more documentation on this.
| Event Type | Description |
|---|---|
close.bs.alert |
This event fires immediately when the close instance method is called. |
closed.bs.alert |
This event is fired when the alert has been closed (will wait for CSS transitions to complete). |