Bootstrap - Alerts
This
chapter will discuss about alerts and the classes Bootstrap provides for
alerts. Alerts provide a way to style messages to the user. They provide
contextual feedback messages for typical user actions.
You can add
an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin.
You can
add a basic alert by creating a wrapper <div> and adding a class of.alert and one of the four contextual classes
(e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).
The following example demonstrates this −
<div class = "alert alert-success">Success! Well
done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>
Dismissal Alerts
To build
a dismissal alert −
·
Add a basic alert by creating a wrapper <div> and adding a
class of.alert and one of the four
contextual classes (e.g., .alert-success, .alert-info, .alert-warning,
.alert-danger)
·
Also add optional .alert-dismissable to
the above <div> class.
·
Add a close button.
The following
example demonstrates this −
<div class = "alert alert-success alert-dismissable">
<button type =
"button" class = "close" data-dismiss = "alert"
aria-hidden = "true">
×
</button>
Success! Well done its submitted.
</div>
<div class = "alert alert-info alert-dismissable">
<button type =
"button" class = "close" data-dismiss = "alert"
aria-hidden = "true">
×
</button>
Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
<button type =
"button" class = "close" data-dismiss = "alert"
aria-hidden = "true">
×
</button>
Warning
! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
<button type =
"button" class = "close" data-dismiss = "alert"
aria-hidden = "true">
×
</button>
Error
! Change few things.
</div>
Be sure to use the <button> element with the data-dismiss
= "alert"data
attribute.
Links in Alerts
To get
links in alerts −
·
Add a basic alert by creating a wrapper <div> and adding a
class of.alert and one of the four
contextual classes (e.g., .alert-success, .alert-info, .alert-warning,
.alert-danger)
·
Use the .alert-link utility class to quickly
provide matching colored links within any alert.
<div class = "alert alert-success">
<a href = "#" class =
"alert-link">Success! Well done its submitted.</a>
</div>
<div class = "alert alert-info">
<a href = "#" class =
"alert-link">Info! take this
info.</a>
</div>
<div class = "alert alert-warning">
<a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>
<div class = "alert alert-danger">
<a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>