Please wait...

Alerts

  1. Home
  2. Basic UI

Basic Alerts

Add contextual classes (e.g., .alert-success) for basic alert messages.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Dark Alerts

For dark alerts add .dark class.

Alerts With Icon

Add .alert-icon class.

Alerts With Title

Simply add title.

Link In Alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
warning Warning! Better check yourself, you're not looking too good.
clear Oh snap! Change a few things up and try submitting again.

Alerts Dismissible

Build on any alert by adding an optional .alert-dismissible and close button.

Alerts With Lists

Simple to use alert with list.

Alerts With Alt

Simply use .alert-alt class.

ALERTS IN MATERIAL COLORS

You can use any colour suited according to the nature of the task.

Alerts In Material Colors With Icon

Use class (.bg-indigo, .bg-cyan, .bg-blue-grey) for material colors
info_outline Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id
face Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id
keyboard_voice Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id

Alerts In Material Colors With Link

Use class (.bg-purple, .bg-grey, .bg-lime) for material colors
Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id.
Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id.
Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id.

Alerts In Material Colors With Title

Use class (.bg-pink, .bg-orange, .bg-teal) for material colors

Demo Title

Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id

Demo Title

Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id

Demo Title

volume_up Lorem ipsum dolor sit amet, id fugit tollit pro, illud nostrud aliquando ad est, quo esse dolorum id

Alerts In Material Colors With List

Use class (.bg-green, .bg-red, .bg-brown) for material colors

Demo Title

  • Lorem ipsum dolor sit amet
  • Illud nostrud aliquando ad est

Demo Title

  • Lorem ipsum dolor sit amet
  • Illud nostrud aliquando ad est

Demo Title

volume_up
  • Lorem ipsum dolor sit amet
  • Illud nostrud aliquando ad est