How to Create Bootstrap 5 Alerts: Explained with 5 Examples

A little about Bootstrap 5 Alerts

The alert is a way of communicating with the users of your website. A contextual feedback message can be displayed to the user by using the Bootstrap 5 built-in component, easily.

For example, you may display an alert as a warning that is orange in color. Similarly, a critical message can be given .danger- class that is red in color, and a success message (the record is saved, for example) can be displayed in green.

Quick Online Demos:

Contextual classes, Alert with colored links, Icons, Close alert by the cross, Bootstrap icons in alerts

See the examples below for creating alerts with various options.

The example of alerts with contextual classes

In this example, we utilized available contextual classes (for colors) to create alerts in Bootstrap 5. For each alert, the main .alert class is used as follows:

See online demo and code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>Bootstrap 5 Block Button Example</h2>

An example of an alert with primary class!

</div>

An example of an alert with secondary class!

</div>

An example of an alert with primary class!

</div>

An example of an alert with success class!

</div>

An example of an alert with warning class!

</div>

An example of an alert with info class!

</div>

An example of an alert with light class!

</div>

An example of an alert with dark class!

</div>

</body>

</html>

The example with a link color in alerts

You may add links in the message of alerts and to match the color, utilize the available class for links i.e. alert-link. This will match the color according to the contextual class given for the main alert. See the code and output below:

See online demo and code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>Bootstrap 5 Block Button Example</h2>

An example of an alert with a link

The example of an alert containing a <a href="https://www.jquery-az.com/" class="alert-link">link</a> with primary class.

</div>

An example of an alert containing a <a href="https://www.jquery-az.com/" class="alert-link">link</a> with primary class.

</div>

A simple success alert with <a href="https://www.jquery-az.com/" class="alert-link">an example link</a>.

</div>

A simple danger alert with <a href="https://www.jquery-az.com/" class="alert-link">an example link</a>.

</div>

A simple warning alert with <a href="https://www.jquery-az.com/" class="alert-link">an example link</a>.

</div>

A simple info alert with <a href="https://www.jquery-az.com/" class="alert-link">an example link</a>.

</div>

A simple light alert with <a href="https://www.jquery-az.com/" class="alert-link">an example link</a>.

</div>

A simple dark alert with <a href="https://www.jquery-az.com/" class="alert-link">an example link</a>.

</div>

</body>

</html>

The example of alerts with Icons

In this example, the alerts are created with an icon using various contextual classes.

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>Bootstrap 5 Alerts Example</h2>

</svg>

<div>

An example alert with an icon

</div>

</svg>

<div>

An example alert with an icon

</div>

</svg>

<div>

An example alert with an icon

</div>

</svg>

<div>

An example alert with an icon

</div>

</svg>

<div>

An example alert with an icon

</div>

</body>

</html>

The example of alerts with the cross to close alert

In this example, various colored alerts are created with the cross button towards the right side. By clicking on that, the alert will be dismissed. For that, just add the .alert-dismissible class in the container:

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<!DOCTYPE html>

<head>

</head>

<body>

<strong>Primary!</strong> alert with dismiss option.

</div>

<strong>Secondary!</strong> alert with dismiss option.

</div>

<strong>Danger!</strong> alert with dismiss option.

</div>

<strong>Light!</strong> alert with dismiss option.

</div>

<strong>Success!</strong> alert with dismiss option.

</div>

<strong>Error!</strong> alert with dismiss option.

</div>

<strong>Warning!</strong> alert with dismiss option.

</div>

<strong>Info!</strong> alert with dismiss option.

</div>

</body>

</html>

Another example of Bootstrap 5 alerts with icons

In this example, the alerts are created with icons inside. For that, bootstrap-icons.css is added in the head section.

See online demo and code

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html>

<head>

<style>

/* Custom style to set icon size */

.alert i[class^="bi-"]{

font-size: 1.5em;

line-height: 1;

}

</style>

</head>

<body>

<strong class="mx-2">Info!</strong> alert with alarm icon.

</div>

<strong class="mx-2">Warning!</strong> alert with save icon.

</div>

<strong class="mx-2">Primary!</strong> alert with search icon.

</div>

<strong class="mx-2">Dark!</strong> alert with code-square icon.

</div>

<strong class="mx-2">Success!</strong> alert with cloud-upload icon.

</div>

<strong class="mx-2">Secondary!</strong> alert with pdf icon.

</div>

</body>

</html>

For a complete available icons list, go to this link: https://icons.getbootstrap.com/

A little about Bootstrap 5 Alerts

The example of alerts with contextual classes

See online demo and code

The example with a link color in alerts

See online demo and code

The example of alerts with Icons

See online demo and code

The example of alerts with the cross to close alert

See online demo and code

Another example of Bootstrap 5 alerts with icons

See online demo and code

Related Tutorials: