Alert is a component that can be used to notify the user of an important event.


Alert is a component that can be used to notify the user of an important event or to display a message to the user. It can bring attention to the user’s to a particular task or to a particular message.

This is a normal alert
Just add the class alert to the div element.

<div class="alert">This is a normal alert</div>

Alert variety:

You can have variety of alert. You can use different color to show its beahviour.

This is a normal alert with alert class.

This is a success alert with success class.

This is a info alert with info class.

This is a warning alert with warning class.

This is a danger alert with danger class.

<div class="alert"><p>Normal alert</p></div>
<div class="alert success"><p>Success Alert</p></div>
<div class="alert info"><p>Info Alert</p></div>
<div class="alert warning"><p>Warning Alert</p></div>
<div class="alert danger"><p>Danger Alert</p></div>

Alert With Links:

There are some alerts that can have links. You can add links to the alert.

Normal Alert

this is link

Success Alert

this is link

Info Alert

this is link

Warning Alert

this is link

Danger Alert

this is link

<div class="alert"><p>Normal alert</p><hr><a href="#alert">this is link</a></div>
<div class="alert success"><p>Success Alert</p><hr><a href="#success">this is link</a></div>
<div class="alert info"><p>Info Alert</p><hr><a href="#info">this is link</a></div>
<div class="alert warning"><p>Warning Alert</p><hr><a href="#warning">this is link</a></div>
<div class="alert danger"><p>Danger Alert</p><hr><a href="#danger">this is link</a></div>