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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...