Alert Popup in Bootstrap
Learn bootstrap alert and popup related classes. Alert popups are used to display some important messages to the user, Ex: Warning messages, Error messages, Information messages, etc.
Alert
- Add some padding around the content,
- Add some bottom margin
- Add a few round corners etc.
Alert-heading
It indicates the heading of the alert box and inherits the parent element color. We can create an alert heading using <h1> – <h6> tags and class sets to alert-heading.
<div class="alert">
<p> Sample Alert Box </p>
<h3 class="alert-heading"> Alert Heading </div>
</div>
Output:
Alert box color classes:
- alert-primary: It sets the text color to dark blue color and the background color to light blue color.
<div class="alert alert-primary"> <p> Sample Alert Box </p> <h3 class="alert-heading"> Alert Heading </div> </div>
- Output:
- alert-secondary: It sets the text color to dark gray color and the background color to light gray.
- alert-success: It sets the text color to dark green color and the background color to light green.
- alert-info: It sets the text color to dark pale blue color and the background color to light pale blue.
- alert-warning: It sets the text color to dark yellow blue color and the background color to light yellow.
- alert-danger: It sets the text color to dark red color and the background color to light red.
- alert-dark: It sets the text color to dark gray color and the background color to mid-gray.
- alert-light: It sets text color to mid-gray color and background color to light gray color.
- alert-link: displays text darker in color.
I hope you find this guide useful and keep learning to code!