Bootstrap Alerts

In this section we are going to describe the alerts in bootstrap and also the classes for the alerts in bootstrap. The bootstrap alerts are used to generate predefined alert messages for a feedback. The alert messages can be created by using the <div> tag and adding the class .alert to it. There are different types of alert messages that can be added by suing different classes like for the warning alert message we use .alert-warning class.

Consider the following example in which we have created all the four types of alert messages using the respective classes:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = “/ scripts / jquery. min. js ” >< /script >

< script src = ” / bootstrap / js/ bootstrap. min. js ” ></ script >

< /head >

< body >

< div class = “alert alert- success” > Success! You have successfully logged in.

</ div >

< div class = “alert alert- info” > Info! Consider the information to proceed forward. < /div >

< div class = “alert alert- warning” > Warning! All the data will be lost, if you sign out. < /div >

< div class = “alert alert – danger” >Error! Please try again, username or password is wrong. </ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

Bootstrap Example


Dismissal Alerts:

A dismissal alert is the one that can be dismissed or closed. In bootstrap a dismissal alert can be created by using the <div> tag and adding .alert class with any of the four classes for the types of the alert messages such as .alert-warning, etc. After this add the class .alert-dismissal to the same <div> tag and at the end add the close button.

Consider the following example in which we have created dismissal alerts:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Online </ title >

< link href = “/ bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” >< /script >

< script src = “/ bootstrap / js/ bootstrap. min. js ” ></ script >

< /head >

< body >

< div class = “alert alert- success alert- dismissable” >

< button type = “button” class = “close” data- dismiss = “alert” aria- hidden = “true” >

&times;

< /button >

Success! You have successfully logged in.

</ div >

< div class = “alert alert- info alert- dismissable” >

< button type = “button” class = “close” data- dismiss = “alert” aria- hidden = “true” >

&times;

</ button >

Info! Consider the information to proceed forward.

</ div >

<div class = “alert alert-warning alert-dismissable”>

<button type = “button” class = “close” data-dismiss = “alert” aria-hidden = “true”>

&times;

</button>

Warning! All the data will be lost if you sign out.

</div>

<div class = “alert alert-danger alert-dismissable”>

<button type = “button” class = “close” data-dismiss = “alert” aria-hidden = “true”>

&times;

</button>

Error! Please try again, username or password is wrong.

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

Dismissal Alerts

In the above example, it should be ensured that the <button> tag is used with dismiss = “alert”. The button is used to close or dismiss the alert message.


Links in Alerts:

In bootstrap we can also add links to the alerts. This can be done using the <div> tag with .alert class and with any of the four classes for the types of the alert messages such as .alert-warning, etc. Then use the .alert-link class to include a link within the alerts.

Consider the following example in which we have used links within alerts:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css ” rel = “stylesheet” >

< script src = ” /scripts / jquery. min. js ” >< /script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

< /head >

< body >

< div class = “alert alert- success” >

< a href = “#” class = “alert- link ” > Success! You have successfully logged in.

< / a >

</ div >

< div class = “alert alert- info” >

< a href = “#” class = “alert- link” > Info! Consider the information to proceed forward. < /a >

</ div >

< div class = “alert alert- warning” >

< a href = “#” class = “alert- link” > Warning! All data will be lost, if you sign out. < /a >

< /div >

< div class = “alert alert- danger” >

< a href = “#” class = “alert- link” > Error! Please try again, username or password is wrong. </ a >

</ div >

< /body >

</ html >

The above code will generate the following result:

OUTPUT:

OUTPUT