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 dismissible tag 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 border-2 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.
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 bg-*, border-* & text-white class to set an alert
with solid style.
Primary Solid Alert
Secondary Solid Alert
Success Solid Alert
Danger Solid Alert
Warning Solid Alert
Info Solid Alert
Light Solid Alert
Dark Solid Alert