Thursday, May 17, 2018

What is closing & Animated alerts?

Closing Alerts

Click on the "x" symbol to the right to close me.
To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

Example

<div class="alert alert-success alert-dismissible"> 
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
<strong>Success!</strong> Indicates a successful or positive action. </div>

Animated Alerts

  Click on the "x" symbol to the right to close me. I will "fade" out.
The .fade and .in classes adds a fading effect when closing the alert message:

Example

<div class="alert alert-danger fade in">

No comments:

Post a Comment