Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Standard Alerts

Standard Alerts can be created using alert class, followed by the variant name. It has six variants alert-primary, alert-secondary, alert-success, alert-danger, alert-warning and alert-dark.

Outline Alerts

Outline Alerts can be created using alert class, followed by the variant name. It has six variants outline-primary, outline-secondary, outline-success, outline-danger, outline-warning and outline-dark.

Alerts with Icon

Alerts with Icon can be created using alert class, followed by the variant name and the i element. It has six variants alert-primary, alert-secondary, alert-success, alert-danger, alert-warning and alert-dark. You can also use padding and margin utilities classes to add margins and padding. For example, mr stands for margin-right and pl stands for padding-left.