How to create warning notification alerts in Bootstrap ?
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 = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container py-5" > < h4 class = "text-center text-uppercase" > w3wiki 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:
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 = "https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" > </ script > < script src = "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-alert.js" > </ script > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" > </ 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 >w3wiki</ 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:
Contact Us