--- layout: default title: "Alerts - Sleek Admin Dashboard Template" bodyClass: "header-fixed sidebar-fixed sidebar-dark header-light" parent: "ui-elements" sub_parent: "components" activePage: "alert" ---

# Alerts

{% include breadcrumb.htm %}

## Default Alerts

Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Read bootstrap documentaion for more details.

primary alerts
This is a primary alert—check it out!
secondary alerts
This is a secondary alert—check it out!
success alerts
This is a success alert—check it out!
danger alerts
A simple danger alert—check it out!
warning alerts
This is a warning alert—check it out!
info alerts
This is a info alert—check it out!
light alerts
This is a light alert—check it out!
dark alerts
This is a dark alert—check it out!

## Icon Alerts

For icon alert add `<i class="mdi mdi-alert mr-1"></i>` inside `< div class="alert" role="alert">` . Get classes for material icon here.

primary alerts
This is a primary alert—check it out!
secondary alerts
This is a secondary alert—check it out!
success alerts
This is a success alert—check it out!
danger alerts
This is a danger alert—check it out!
warning alerts
This is a warning alert—check it out!
info alerts
This is a info alert—check it out!
light alerts
This is a light alert—check it out!
dark alerts
This is a dark alert—check it out!

## Dismissible Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., `.alert-success` ). For inline dismissal, use the alerts jQuery plugin.

primary alerts
This is a primary alert—check it out!
secondary alerts
This is a secondary alert—check it out!
success alerts
This is a success alert—check it out!
danger alerts
This is a danger alert—check it out!
warning alerts
This is a warning alert—check it out!
info alerts
This is a info alert—check it out!
light alerts
This is a light alert—check it out!
dark alerts
This is a dark alert—check it out!

## Heightlighted Alerts

For Heightlighted Alert add class `.alert-highlighted` to `<div class="alert" role="alert">`

primary alerts
This is a primary alert—check it out!
secondary alerts
This is a secondary alert—check it out!
success alerts
This is a success alert—check it out!
danger alerts
This is a danger alert—check it out!
warning alerts
This is a warning alert—check it out!
info alerts
This is a info alert—check it out!
light alerts
This is a light alert—check it out!
dark alerts
This is a dark alert—check it out!

## Dismissing Outline Alerts

For outline Alert add class `.alert-outlined` to `< div class="alert" role="alert">`

primary alerts
This is a primary alert—check it out!
secondary alerts
This is a secondary alert—check it out!
success alerts
This is a success alert—check it out!
danger alerts
This is a danger alert—check it out!
warning alerts
This is a warning alert—check it out!
info alerts
This is a info alert—check it out!
light alerts
This is a light alert—check it out!
dark alerts
This is a dark alert—check it out!