Bootstrap Alerts
Bootstrap provides an simple way to create alert messages with css class.
Bootstrap used following four class for alert.
Bootstrap introduces another 4 classes
Output
Alert Links
Place the alert-link class to any links inside the alert box to create Alert Links.The color will be matching color handled by Bootstrap.
Example
Example
Bootstrap provides an simple way to create alert messages with css class.
Bootstrap used following four class for alert.
- .alert-success
- .alert-info,
- .alert-warning
- .alert-danger
Bootstrap introduces another 4 classes
- .alert-primary
- .alert-secondary
- .alert-light
- .alert-dark
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="alert
alert-success">
<strong>Success!</strong>
This
alert box example of Bootstrap alert-success.
</div>
<div
class="alert
alert-info">
<strong>Info!</strong>
This
alert box example of Bootstrap alert-info.
</div>
<div
class="alert
alert-warning">
<strong>Warning!</strong>
This
alert box example of Bootstrap alert-warning.
</div>
<div
class="alert
alert-danger">
<strong>Danger!</strong>
This
alert box example of Bootstrap alert-danger.
</div>
<div
class="alert
alert-primary">
<strong>Primary!</strong>
This
alert box example of Bootstrap alert-primary.
</div>
<div
class="alert
alert-secondary">
<strong>Secondary!</strong>
This
alert box example of Bootstrap alert-secondary.
</div>
<div
class="alert
alert-light">
<strong>Light!</strong>
This
alert box example of Bootstrap alert-light.
</div>
<div
class="alert
alert-dark">
<strong>Dark!</strong>
This
alert box example of Bootstrap alert-dark.
</div>
</div>
</body>
</html>
Output
Success! This alert box example of Bootstrap alert-success.
Info! This alert box example of Bootstrap alert-info.
Warning! This alert box example of Bootstrap alert-warning.
Danger! This alert box example of Bootstrap alert-danger.
Primary! This alert box example of Bootstrap alert-primary.
Secondary! This alert box example of Bootstrap alert-secondary.
Light! This alert box example of Bootstrap alert-light.
Dark! This alert box example of Bootstrap alert-dark.
Alert Links
Place the alert-link class to any links inside the alert box to create Alert Links.The color will be matching color handled by Bootstrap.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="alert
alert-success">
<strong>Success!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-success.</a>.
</div>
<div
class="alert
alert-info">
<strong>Info!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-info.</a>.
</div>
<div
class="alert
alert-warning">
<strong>Warning!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-warning.</a>.
</div>
<div
class="alert
alert-danger">
<strong>Danger!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-danger.</a>.
</div>
<div
class="alert
alert-primary">
<strong>Primary!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-primary.</a>.
</div>
<div
class="alert
alert-secondary">
<strong>Secondary!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-secondary.</a>.
</div>
<div
class="alert
alert-light">
<strong>Light!
</strong><a
href="#"
class="alert-link">This
alert box example of Bootstrap alert-light.</a>.
</div>
<div
class="alert
alert-dark">
<strong>Dark!
</strong><a
href="#"
class="alert-dark">This
alert box example of Bootstrap alert-dark.</a>.
</div>
</div>
</body>
</html>
Output :
Closing
Alerts
Alert message can be closed ,You have to add ".alert-dismissable" class to the alert container.You need to place class="close" and data-dismiss="alert" in link or button element.
Alert message can be closed ,You have to add ".alert-dismissable" class to the alert container.You need to place class="close" and data-dismiss="alert" in link or button element.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="alert
alert-success">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Success!</strong>
This
alert box example of Bootstrap alert-success.
</div>
<div
class="alert
alert-info">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Info!</strong>
This
alert box example of Bootstrap alert-info.
</div>
<div
class="alert
alert-warning">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Warning!</strong>
This
alert box example of Bootstrap alert-warning.
</div>
<div
class="alert
alert-danger">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Danger!</strong>
This
alert box example of Bootstrap alert-danger.
</div>
<div
class="alert
alert-primary">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Primary!</strong>
This
alert box example of Bootstrap alert-primary.
</div>
<div
class="alert
alert-secondary">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Secondary!</strong>
This
alert box example of Bootstrap alert-secondary.
</div>
<div
class="alert
alert-light">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Light!</strong>
This
alert box example of Bootstrap alert-light.
</div>
<div
class="alert
alert-dark">
<a
href="#"
class="close"
data-dismiss="alert"
aria-label="close">X</a>
<strong>
Dark!</strong>
This
alert box example of Bootstrap alert-dark.
</div>
</div>
</body>
</html>
Output
X
Success! This alert box example of Bootstrap alert-success.
X
Info! This alert box example of Bootstrap alert-info.
X
Warning! This alert box example of Bootstrap alert-warning.
X
Danger! This alert box example of Bootstrap alert-danger.
X
Primary! This alert box example of Bootstrap alert-primary.
X
Secondary! This alert box example of Bootstrap alert-secondary.
X
Light! This alert box example of Bootstrap alert-light.
X
Dark! This alert box example of Bootstrap alert-dark.
Output
Animated
Alerts
Alert can be animated .Class ".fade" and ".in" adds a fading effect when closing the alert message.
Alert can be animated .Class ".fade" and ".in" adds a fading effect when closing the alert message.
-
.fade
-
.inExample<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><meta name="viewport" content="width = device-width, initial-scale = 1"><body><div class="container"><div class="alert alert-success alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">X</a> Success!</strong>This alert box example of Bootstrap alert-success.</div><div class="alert alert-info alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">X</a> Success!</strong>Info!</strong> This alert box example of Bootstrap alert-info.</div><div class="alert alert-warning alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">X</a> Success!</strong>Warning!</strong> This alert box example of Bootstrap alert-warning.</div><div class="alert alert-danger alert-dismissible fade in"><a href="#" class="close" data-dismiss="alert" aria-label="close">X</a> Success!</strong>Danger!</strong> This alert box example of Bootstrap alert-danger.</div></div></body></html>X Success!
X Success!
Info! This alert box example of Bootstrap alert-info.
X Success!
Warning! This alert box example of Bootstrap alert-warning.
X Success!
Danger! This alert box example of Bootstrap alert-danger.
