Lesson 9: Alerts in Bootstrap 5

What is Bootstrap 5 Alert? Bootstrap 5 alert is a crucial component in web and application development. Here's everything you need to know about alerts in Bootstrap 5 .

Basic Alert

You can add a basic alert by creating a block with additional classes .alertcombined with the 6 context classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-lightor.alert-dark

Let's try the following example:

English example text

Alert Bootstrap

The alert is created with the.alert class, which includes a contextual color class:

 English example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example text

We will receive warnings like the following on the web:

Insert a Link in the Alert

When you need to add a link to the alert, you add a class .alert-linkto the link inside the alert box, then the link will have a color that matches the alert's color, as in this example:

English example text

Add a Link to Alert

 English example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example textEnglish example text

When you hover your mouse over the warning link, you will see the link appear at the bottom of the browser window as shown in the image:

Close the Alert

To close the alert message, you add a class .alert-dismissibleto the alert container. Then add the class="close" and data-dismiss="alert" to the link or button element (the button that you click to close the alert). We will learn more about buttons in Bootstrap in the next lesson.

Here's an example of closing warnings in Bootstrap 5:

English example text

Close the Alert

  English example textEnglish example text

When you click the button xon the right, the alert will be closed:

Create Dynamic Alerts

If you add the class .fade, .showit will create a fade-out effect when the alert closes. The usage is the same as above; you add fade and show to the tag div. For example, if you need to close an alert notifying you that an action has been successfully completed, it would look like this:

Then we have this.html file:

English example text

Close the Alert

  English example textEnglish example text

This code produces the same result as above; the effect only appears when you click the close button, so I didn't take a screenshot.

Note: In Bootstrap 4, you will need to add an × character between the opening and closing Button tags. The closing button in Bootstrap 4 will then look like this:

×

× (×) is a very commonly used HTML entity for closing buttons instead of the letter x.

Icon

Similarly, you can use the flexbox and Icon widgets in Bootstrap to create alerts with icons. Depending on the icon and content, you may want to add more widgets or customization options.

For example:

English example text

You need more than one icon for your alert. Consider using more Bootstrap icons and creating an internal SVG icon for easy referencing.

English example text

By the end of this article, you should now be able to customize the format of a warning/notification on your website to alert users. Keep following our next series of articles!