Boost Your Alert Animation with These Amazing Bootstrap Tips Click Here

Alert messages are very popular with JavaScript to provide interactive information to users. It is used for form validations and throwing messages on the browser. However, you can also use alerts with CSS for showing static messages by excluding the script files. Many themes and plugins also use Bootstrap framework to show these alert messages. In this article, we will explain how to create different types of Bootstrap alerts.

In Bootstrap version 3 there were four colored alerts, but in Bootstrap versions 4 and 5 there are totally 8 types of alerts. Below is the list of contextual classes used in Bootstrap 5 versions.

Below is how the alert messages will look like on a published website. The alert classes can be used with any of the HTML block element, in our example let us use with

tag.

Best Examples Of Chatgpt Email Marketing Prompts

You can use most of the HTML elements within alert boxes using the dedicated classes for heading and links. Use the default HTML tags for paragraph and other typography elements. Let us create a paragraph with heading and a sample image inside the success alert box.

The hyperlinks may create problems with visibility as the link color may not sync with the alert box color. Bootstrap solves this problem by providing a utility class “alert-link” to inherit the link color from the alert color.

As of now we have used only the base Bootstrap CSS framework to create the alerts. These CSS alerts are static with no possibility to close them. There are dedicated jQuery plugins available to create dismissible alerts with a “X” button at the right end of the alert. You don’t need to run for those plugins, the compiled Bootstrap JavaScript and the CSS framework will do the magic for you.

How To Create Bootstrap 5 Alerts?

Below is a warning alert with a close button, once clicked on the “X” button the alert will disappear and the below content will move up to show the content in an appealing manner without large gap.

Glyphicons are not supported from Bootstrap 4, but you can use the Bootstrap icons, font awesome icons or any other SVG icons with alert component.

Version 5 comes with 1330+ in-built icons in SVG and web fonts format. This is the best option as it blends nicely with other elements. Below is an example of using Bootstrap icon with alert component.

Multi Step Forms: Get More Leads With Beautiful Web Form Design

Below are some of the examples of using font awesome icon with alert. Check out separate article on how to use font awesome icons with alerts.

Hosting font icons on your own site might be a troublesome task. In such a case, instead of font icons you can use small images in front of the alert components like below.

Below are some of the examples of using font awesome icon with alert. Check out separate article on how to use font awesome icons with alerts.

Hosting font icons on your own site might be a troublesome task. In such a case, instead of font icons you can use small images in front of the alert components like below.

Berbagi