Alerts

---

Introduction

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task. By using alerts, you provide contextual feedback messages to your users, depending on actions performed by them.

Simple Alerts

Simple Alert is there to show some quick info to the user or have a link in it for the user to take action. By default all the actions the 100% width of the container.

This is a Primary Alert with text only.

This is a Primary Alert with an example link

Code:

Alerts with icon

An icon is used inside the alert to visually convey the type and importance of the alert to the user. Icons used here are imported from FontAwesome and can easily be changed.

This is a Success Alert

This is a Warning Alert

This is a Danger Alert

Code:

Alerts with Dismiss

An icon is used inside the alert to visually convey the type and importance of the alert to the user with a dismiss icon at the end to close the alert.

This is a Success Alert with dismiss

This is a Warning Alert with dismiss

This is a Danger Alert with dismiss

Reset

Code:

---