Alerts
Default Alerts
Use the alert class to show a default alert.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Borderless Alerts
Use the border-0 class to set alert without
border.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Dismissing Alerts
Use the alert-dismissible class to add dismissing
button to the alert.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Link Color Alerts
Use the alert-link class at <a> tag to show
matching colored links within the given alert.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Live Alert Example
Click the Show live alert button to show an alert on button click.
Outline Alerts
Use the bg-body-secondary class to set an alert
with outline.
Primary Outline Alert
Secondary Outline Alert
Success Outline Alert
Danger Outline Alert
Warning Outline Alert
Info Outline Alert
Dark Alert
Left Border Alerts
Use the alert-border-left class to set an alert
with the left border & outline.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Label Icon Alerts
Use the alert-label-icon class to set an alert
with a label icon.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Additional Content Alerts
Use the alert-additional class and Use the
alert- class to HTML elements like headings, paragraphs, dividers
etc.
Primary Alert
Well done !
Aww yeah, you successfully read this important alert message.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Danger Alert
Something is very wrong!
Change a few things up and try submitting again.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Success Alert
Yey! Everything worked!
This alert needs your attention, but it's not super important.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning Alert
Uh oh, something went wrong!
Better check yourself, you're not looking too good.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Top Border with Outline Alerts
Use the alert-top-border class to set an alert
with the top border and outline.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Label Icon Arrow Alerts
Use the alert-label-icon label-arrow class to
show an alert with label icon and arrow.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
info Alert
Light Alert
Dark Alert
Rounded Label Icon Alerts
Use the alert-label-icon rounded-label class to
set an alert with a rounded label icon.
Primary Alert
Secondary Alert
Success Alert
Danger Alert
Warning Alert
Info Alert
Light Alert
Dark Alert
Solid Alerts
Use the border-*, bg-*,
text-white class to set an alert with solid style.