Showing posts with label Bootstrap Alert. Show all posts
Showing posts with label Bootstrap Alert. Show all posts

Wednesday 15 September 2021

Bootstrap Alerts

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 :

Bootstrap Alerts