Bootstrap Alert Popup Classes

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 popup in bootstrapAlert 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 popup in bootstrap
  • 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!

Leave a Reply