Alerts & Notifications
1. Default Alerts
Copy
Info alert! Change a few things up and try submitting
again.
Danger alert! Change a few things up and try submitting
again.
Success alert! Change a few things up and try submitting
again.
Warning alert! Change a few things up and try submitting
again.
Dark alert! Change a few things up and try submitting
again.
2. Alerts with Icon
Copy
Info alert! Change a few things up and try submitting
again.
Danger alert! Change a few things up and try submitting
again.
Success alert! Change a few things up and try submitting
again.
Warning alert! Change a few things up and try submitting
again.
Dark alert! Change a few things up and try submitting
again.
3. Dismissible alerts
Copy
Dismissing the alerts can be done by using the
data-collapse-toggle="alertId" data attribute where
alertId is the id of the whole alert component.
A simple info alert with an
example link. Give it
a click if you like.
A simple info alert with an
example link. Give it a
click if you like.
A simple info alert with an
example link. Give it
a click if you like.
A simple info alert with an
example link. Give
it a click if you like.
A simple dark alert with an
example link. Give it
a click if you like.
4. Top Border Accent
Copy
Dismissing the alerts can be done by using the
data-collapse-toggle="alertId" data attribute where
alertId is the id of the whole alert component.
A simple info alert with an
example link. Give it
a click if you like.
A simple danger alert with an
example link. Give it a
click if you like.
A simple success alert with an
example link. Give it
a click if you like.
A simple danger alert with an
example link. Give
it a click if you like.
A simple dark alert with an
example link. Give it
a click if you like.
5. Bottom Border Accent
Copy
Dismissing the alerts can be done by using the
data-collapse-toggle="alertId" data attribute where
alertId is the id of the whole alert component.
A simple info alert with an
example link. Give it
a click if you like.
A simple danger alert with an
example link. Give it a
click if you like.
A simple success alert with an
example link. Give it
a click if you like.
A simple danger alert with an
example link. Give
it a click if you like.
A simple dark alert with an
example link. Give it
a click if you like.
6. Alerts with more options
Copy
Dismissing the alerts can be done by using the
data-collapse-toggle="alertId" data attribute where
alertId is the id of the whole alert component.
This is a info alert
More info about this info alert goes here. 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.
This is a danger alert
More info about this info danger goes here. 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.
This is a success alert
More info about this info success goes here. 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.
This is a warning alert
More info about this info warning goes here. 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.
This is a dark alert
More info about this info dark goes here. 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.
On this Page
- Default Alerts
- Alerts with Icon
- Dismissible alerts
- Top Border Accent
- Bottom Border Accent
- Alerts with more options
Next Element:
Previous Element:
Company
Useful Links
Subscribe for updates
Stay in Touch with us and get all the updates for next offers and Deals.