How to create warning notification alerts in Bootstrap ?
Last Updated :
24 Aug, 2021
Before or after performing an action, we frequently encounter specific notifications on some websites. These alert messages are highlighted text that should be taken into account when executing a task. Using preset classes in Bootstrap, these alert messages can be displayed on the website.
Approach: The .alert class followed by contextual classes are used to display the alert message on website. The alert classes are: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light and .alert-dark. We can use .alert-warning to create warning notification alerts in bootstrap.
Below is the procedure to implement a simple warning alert in Bootstrap.
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<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>
Step 2: Add the .alert and the warning alert contextual classes (e.g., .alert-warning).
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
Example 1: In this example, we will see types of alerts in bootstrap. Users can use any type of warning alert.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Warning Alerts</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href=
/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container py-5">
<h4 class="text-center text-uppercase">
GeeksForGeeks Bootstrap 5 warning messages
</h4>
<h6>Basic Warning alert</h6>
<div class="alert alert-warning">
<strong>Warning!</strong>
There was a problem with connection.
</div>
<h6>Warning alert with link</h6>
<div class="alert alert-warning">
<strong>Warning!</strong>
There was a problem with wifi connection<a
href="#"
class="alert-link">
Contact us</a>.
</div>
<h6>Warning alert with close button</h6>
<div class="alert alert-warning">
<button type="button"
class="close"
data-dismiss="alert">
×
</button>
<strong>Warning!</strong>
There was a problem with wifi connection.
</div>
<h6>Warning alert with close button and fade animation</h6>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button"
class="close"
data-dismiss="alert">
×
</button>
<strong>Warning!</strong>
There was a problem with internet connection.
</div>
<h6>Warning alert with heading</h6>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button"
class="close"
data-dismiss="alert">
×
</button>
<h5 class="alert-heading">Warning!</h5>
Wrong credentials.
</div>
</div>
</body>
</html>
|
Output:
Warning Alert Types in Bootstrap
Example 2: In this example, we will use the warning alerts using the button click. When the user clicks the button, a warning alert will be generated.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Buttons and alerts</title>
<link href=
rel="stylesheet">
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#success').click(function (e) {
e.preventDefault()
$('#message').html(`
<div class="alert alert-success fade in">
<button type="button class="close close-alert"
data-dismiss="alert" aria-hidden="true">
×
</button>This is a success message
</div>`);
})
$('#warning').click(function (e) {
e.preventDefault()
$('#message').html(`
<div class="alert alert-warning fade in">
<button type="button" class="close close-alert"
data-dismiss="alert" aria-hidden="true">
×
</button> This is a warning message
</div>`);
});
});
</script>
</head>
<body>
<div class="container">
<h2>GeeksForGeeks</h2>
<p class="lead">
Warning Alert message using bootstrap
</p>
<p>
<form method="post">
<button type="button"
class="btn btn-success" id="success">
Success
</button>
<button type="button"
class="btn btn-warning" id="warning">
Warning
</button>
</form>
</p>
<div id="message"></div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...