- Bootstrap provides easy way to create predefined alert messages.
- In Bootstrap alerts created with predefined Bootstrap classes such as .
alert class,followed by some other classes .alert-success,.alert-info,
.alert-warning or .alert-danger etc
<div class="alert alert-primary" role="alert">
A simple primary alert!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert!
</div>
<div class="alert alert-success" role="alert">
A simple success alert!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert!
</div>
<div class="alert alert-info" role="alert">
A simple info alert!
</div>
<div class="alert alert-light" role="alert">
A simple light alert!
</div>
<div class="alert alert-dark" role="alert">
A simple dark aler!
</div>
 |
Alert Link Colors
Use the alert-link utility class to provide matching colored link within any alert
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">Code Family</a>.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">Code Family</a>
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">Code Familynk</a>.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">Code Family</a>.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">Code Family</a>.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">Code Family</a>.
</div>
</div>
Additional content
Some times alerts also can contain headings, paragraphs etc.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Codes Family provides best coding materials and web developement tutorials to build a web applications.</p>
<hr>
<p class="mb-0">Programming is very easy, just you need to focous on the logics instead of theory.</p>
</div>