Toggle navigation
TUTORIAL HOME
Bootstrap Alerts
❮ Previous Next ❯
Alerts
Bootstrap provides an easy way to create predefined alert messages:
×Success! This alert box indicates a successful or positive action.
×Info! This alert box indicates a neutral informative change or action.
×Warning! This alert box indicates a warning that might need attention.
×Danger! This alert box indicates a dangerous or potentially negative action.
Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
»
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links":
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
»
Closing Alerts
× Click on the "x" symbol to the right to close me.
To close the alert message, add a .alert-dismissable 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-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
»
The aria-* attribute and × explanation
To help improve accessibility for people using screen readers, you should include the aria-label="close" attribute, when creating a close button.
× (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".
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">
»
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
Complete Bootstrap Alert Reference
For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.
❮ Previous Next ❯
TUTORIAL HOME
Bootstrap Alerts
❮ Previous Next ❯
Alerts
Bootstrap provides an easy way to create predefined alert messages:
×Success! This alert box indicates a successful or positive action.
×Info! This alert box indicates a neutral informative change or action.
×Warning! This alert box indicates a warning that might need attention.
×Danger! This alert box indicates a dangerous or potentially negative action.
Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success, .alert-info, .alert-warning or .alert-danger:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
»
Alert Links
Add the alert-link class to any links inside the alert box to create "matching colored links":
Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
»
Closing Alerts
× Click on the "x" symbol to the right to close me.
To close the alert message, add a .alert-dismissable 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-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
»
The aria-* attribute and × explanation
To help improve accessibility for people using screen readers, you should include the aria-label="close" attribute, when creating a close button.
× (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".
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">
»
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
Complete Bootstrap Alert Reference
For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.
❮ Previous Next ❯
No comments:
Post a Comment