Bootstrap Alerts provides contextual feedback messages for typical user actions with a handful of available and flexible alert messages. Bootstrap provides an easy way to create predefined alert messages with Bootstrap Alert.
Bootstrap Alert Example
Bootstrap Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the required contextual classes alert-primary, alert-secondary,alert-success,alert-danger,alert-warning,alert-info,alert-dark.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alerts Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br/>
<h2>Bootstrap Alerts</h2>
<br/>
<div class="alert alert-primary" role="alert">
This is a bootstrap primary alert. Use class="alert alert-primary".
</div>
<div class="alert alert-secondary" role="alert">
This is a bootstrap secondary alert. Use class="alert alert-secondary".
</div>
<div class="alert alert-success" role="alert">
This is a bootstrap success alert. Use class="alert alert-success".
</div>
<div class="alert alert-danger" role="alert">
This is a bootstrap danger alert. Use class="alert alert-danger".
</div>
<div class="alert alert-warning" role="alert">
This is a bootstrap warning alert. Use class="alert alert-warning".
</div>
<div class="alert alert-info" role="alert">
This is a bootstrap info alert. Use class="alert alert-info".
</div>
<div class="alert alert-dark" role="alert">
This is a bootstrap dark alert. Use class="alert alert-dark".
</div>
</div>
</body>
</html>
Output :
