Alerts

Alerts are available for any length of text.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Link color

Use the .alert-link utility class to provide matching colored links within an alert.

A simple primary alert with an example link. Give it a click if you like.

A simple secondary 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 warning 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 light 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.

Icons

Enhance alerts with icons for better visibility and context.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

Additional content

Alerts can contain HTML elements like headings, paragraphs, and dividers.

Well done!

Aww yeah, you successfully read this alert message. This text is going to run longer so you can see how spacing within an alert works.

Whenever you need, be sure to use margin utilities to keep things tidy.

Something Wrong!

Aww yeah, you successfully read this alert message. This text is going to run longer so you can see how spacing within an alert works.

Whenever you need, be sure to use margin utilities to keep things tidy.

Dismissing

To dismiss an alert, use .alert-dismissible with a close button.

A simple primary alert—check it out

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Background color

To dismiss an alert, use .alert-dismissible with a close button.

A simple primary alert—check it out

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Border

To dismiss an alert, use .alert-dismissible with a close button.

A simple primary alert—check it out

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Border dashed

Use .border-*, .text-*-emphasis, and .border-dashed for a dashed border in an alert.

A simple primary alert—check it out

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Emma Smith

Design Team

Security Update

Invoice #1432

Emma Smith

Olivia Clark

Isabella Walker

Alerts

Alerts

Link color

Icons

Additional content

Well done!

Something Wrong!

Dismissing

Background color

Border

Border dashed