How to use Bootstrap's alert component in Bootstrap 5.2

In Bootstrap 5.2, the syntax for using the alert component is similar to previous versions of Bootstrap.

First, you need to include the Bootstrap CSS and JavaScript files in your HTML. You can do this by linking to the Bootstrap CSS and JS files hosted on a content delivery network (CDN) or by downloading the files and linking to them locally.

Once you have the Bootstrap CSS and JavaScript included in your HTML, you can use the .alert class to create an alert.

Here's an example of a basic alert:

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

You can also add an .alert-dismissible class to create an alert with a dismiss button:

<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

You also use different type of alert by providing different class, like:

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

It's also worth noting that, Bootstrap 5.2 has changed the HTML markup and classes for their alert component. If you have an application using an older version, it's best to update the HTML and CSS accordingly.

Additional resources
  • Frontend web development courses

    Beginner-friendly courses focusing on HTML, CSS, and JavaScript.

    View Courses
  • Frontend web development projects

    Beginner-friendly projects focusing on HTML, CSS, and JavaScript.

    View Projects
  • Free website templates

    Collection of free, high-quality website templates for your next project.

    View Templates