Alerts
Basic Alert
For styling an alert, use
alert
and
alert-*
clasess.
This is a primary alert with addtional information and content.
This is a secondary alert with addtional information and content.
This is a success alert with addtional information and content.
This is a danger alert with addtional information and content.
This is a warning alert with addtional information and content.
This is a info alert with addtional information and content.
This is a dark alert with addtional information and content.
Alert with icon
Use Feather Icons to create alerts with icons.
This is a primary alert with addtional information and content.
This is a secondary alert with addtional information and content.
This is a success alert with addtional information and content.
This is a danger alert with addtional information and content.
This is a warning alert with addtional information and content.
This is a info alert with addtional information and content.
This is a dark alert with addtional information and content.
Outlined Alert
Use
alert-outlined
class with our contextual classes to create an oulined alert
This is a primary alert with addtional information and content.
This is a secondary alert with addtional information and content.
This is a success alert with addtional information and content.
This is a danger alert with addtional information and content.
This is a warning alert with addtional information and content.
This is a info alert with addtional information and content.
This is a dark alert with addtional information and content.
Dismissable Alert
Use
dismissable
class with our contextual classes to create an outline alert
This is a primary alert with addtional information and content.
This is a secondary alert with addtional information and content.
This is a success alert with addtional information and content.
This is a danger alert with addtional information and content.
This is a warning alert with addtional information and content.
This is a info alert with addtional information and content.
This is a dark alert with addtional information and content.
Controlled Alert
If you want to manually hide the alert, you need to use
createDismissableAlert
function. This function is available globally. Then you can call the
dismiss()
method to hide the alert.
This is a success alert with addtional information and content.
Additional Content
Example of alert with additional content.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus, libero sed delectus nulla necessitatibus magni voluptas inventore esse ducimus, nam, blanditiis ut dolor vero nobis molestiae tenetur perferendis quae! Porro accusantium temporibus quas necessitatibus. Facere dolor repudiandae impedit iure, velit accusamus nisi reprehenderit laudantium consequatur odio est minima placeat architecto?
- Your password must be at least 8 characters
- Your password must include at least one pro wrestling finishing move