Bootstrap 5-Alert


Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.

The classes for text Alerts are:

Example

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class = "alert alert-info">
<strong> Info! </strong> Alert box indicates a neutral informative. </div>
<div class = "alert alert-warning">
<strong>Warning!</strong> Alert box indicates a warning that needs attention. </div>
<div class = "alert alert-danger">
<strong> Danger! </strong> Alert box indicates a negative action. </div>
<div class = "alert alert-primary">
<strong> Primary!</strong> Alert box Indicates an important action. </div>
<div class = "alert alert-secondary">
<strong> Secondary!</strong> Alert box Indicates a slightly less important action. </div>
<div class = "alert alert-dark">
<strong> Dark! </strong> Alert box indicates a Dark grey alert. </div>
<div class = "alert alert-light">
<strong> Light!</strong> Alert box indicates a Light grey alert. </div>
</div>
</body>
</html>


Output

 Bootstrap 5 Example

Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.
Info! Alert box indicates a neutral informative.
Warning! Alert box indicates a warning that needs attention.
Danger! Alert box indicates a negative action.
Primary! Alert box Indicates an important action.
Secondary! Alert box Indicates a slightly less important action.
Dark! Alert box indicates a Dark grey alert.
Light! Alert box indicates a Light grey alert.