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: