Bootstrap Alerts
Bootstrap alerts box messages are used to provide instant attention like warning, error, success, etc.
Followings are the predefined Bootstrap alert box.
How To Create Bootstrap Alerts ?
Follow the following steps to create a alert box .
-
Add
alertclass to the alert container i.e.<div>element base class. -
Add
alert-*class to the alert container to provide different background color of the alert box.
Here alert-* specify one of from the followings:
{
.alert-success,.alert-danger,.alert-secondary,.alert-primary,.alert-info,.alert-light or .alert-dark
}
General Syntax
<span class="alert alert-*"> Alert</span>
Note:* Notify one of from the following: {primary | secondary | success| danger | warning | info | light | dark } options.
Source Code
<div class="container">
<h2 class="text-center">Bootstrap Alert</h2>
<div class="alert alert-primary" role="alert">
primary alert
</div>
<div class="alert alert-secondary" role="alert">
secondary alert
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Bootstrap Alert
Note:
Please keep in mind that alert-* is used for providing different background colors to the alert box.
Alert Link
To create matching alert link within any alert, use .alert-link utility class and assign it to the hyperlink i.e. <a> element's base class.
General Syntax
<div class="alert alert-*">
<a href="#" class="alert-link">Alert Link</a>
</div>
Source Code
<div class="container text-center">
<div class="row">
<div class="col-12 col-sm-12">
<div class="alert alert-primary" role="alert">
Simple primary alert with <a href="#" class="alert-link">an link</a>. Click to see the result.
</div>
</div>
<div class="col-12 col-sm-12">
<div class="alert alert-secondary" role="alert">
Simple secondary alert with <a href="#" class="alert-link">an link</a>. Click to see the result.
</div>
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Try it yourself
Source Code : Output
Colored Alert
You can assign different background color to the alert box through the alert-* class.
Simply, add one of the contextual classes .alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light or .alert-dark to the alert container element's base class.
General Syntax
<div class="alert alert-*">
<a href="#" class="alert-link">Colored Alert Link</a>.
</div>
Source Code
<div class="container mt-5-">
<div class="alert alert-success">
<strong>Success!</strong> You can get
<a href="#" class="alert-link">your score result.</a>.
</div>
<div class="alert alert-warning">
<strong>Success!</strong> You can get <a href="#" class="alert-link">your score result.</a>.
</div>
<div class="alert alert-danger">
<strong>Success!</strong> You can get <a href="#" class="alert-link">your score result.</a>.
</div>
<div class="alert alert-dark">
<strong>Success!</strong> You can get <a href="#" class="alert-link">your score result.</a>.
</div>
<div class="alert alert-info">
<strong>Success!</strong> You can get <a href="#" class="alert-link">your score result.</a>.
</div>
<div class="alert alert-light">
<strong>Success!</strong> You can get <a href="#" class="alert-link">your score result.</a>.
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Bootstrap colored alert link is created by assigning .alert & .alert-* contextual classes to the alert box container base class and assign .alert-link to the hyperlink element (<a>) base class.
Closing Alert Box
Closing alert box is created by assigning .alert-dismissible to alert container base class & assign .btn-close and data-bs-dismiss="alert" attribute to either link(<a>) element or <button> element.
Let us see bootstrap closing alert box
General Syntax
<div class="alert alert-* alert-dismissible show">
<strong>Closing!!</strong> Alert Box
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Source Code
<div class="container mt-5-">
<div class="alert alert-success alert-dismissible show" role="alert">
<strong>Success!!</strong> Your message is successfully submitted.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Assign .btn-close class to the <button> or link(<a>) element base class & assign data attribute data-bs-dismiss="alert" to the
<button> or link(<a>) element.
Animated Alert Box
To create animated alert box, assign .fade and .show classes to the alert container base class.
General Syntax
<div class="alert alert-* alert-dismissible fade show" role="alert">
<strong>Animated!</strong> Alert Box
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">×</button>
</div>
Source Code
<div class="container mt-5-">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> Your message is received now.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">×</button>
</div>
</div>
<!--/container-->
Try it yourself
Source Code : Output
Note:
Please keep in mind that .fade & .show classes are used to create fading effect when closing the alert message.
