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!