Bootstrap 5 Alerts

Last Updated : 03 Apr, 2024

Bootstrap 5 Alerts are customizable components used to convey important information to users. They come in various styles such as success, warning, danger, and info, providing visual feedback to users based on different actions or states within a web application.

Syntax:

<div class="alert alert-type"> Contents of the alert... <div>

Types: There are eight types of alerts available in Bootstrap 5. The classes of these alerts are given below:

alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark

Example 1: This example we demonstrates Bootstrap 5 alerts with different colors: primary, secondary, success, and danger, each displaying "GeeksforGeeks" as content.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Alerts
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
    <div style="text-align: center;
            width:600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px;
            height: 200px; margin: 20px;">
        <div class="alert alert-primary" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-secondary" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-success" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-danger" role="alert">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>

Output:

Example 2: In this example we features Bootstrap 5 alerts styled as warning, info, light, and dark, displaying "GeeksforGeeks" as content within a centered container.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        Bootstrap 5 | Alerts
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
    <div style="text-align: center;
            width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div id="canvas" style="width: 600px; 
            height: 200px; margin: 20px;">
        <div class="alert alert-warning" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-info" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-light" role="alert">
            GeeksforGeeks
        </div>
        <div class="alert alert-dark" role="alert">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>

Output:

Bootstrap 5 Badges

gurrrung

Improve

Article Tags :

Bootstrap 5 Alerts

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?