HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Bootstrap provides an easy way to create predefined alert messages
Bootstrap provides an easy way to create predefined alert messages:
Alerts are created with the .alert
class, followed by one of the
four contextual classes .alert-success
, .alert-info
, .alert-warning
or
.alert-danger
:
<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>
Add the alert-link
class to any links inside the alert box to create "matching colored links":
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
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).
<div class="alert alert-success alert-dismissible">
<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".
For a list of all HTML Entities, visit our HTML Entities Reference.
The .fade
and .in
classes adds a fading effect when
closing the alert message:
<div class="alert alert-danger fade in">
Add a Bootstrap "alert" class to display the result of a successful action.
<div class=""> Success! </div>
For a complete reference of all alert options, methods and events, go to our Bootstrap JS Alert Reference.