Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create warning notification alerts in Bootstrap?
Bootstrap provides a set of classes and components to create alert messages that can be used to notify users about different types of information, such as errors, warnings, and success messages.Warning alerts are commonly used to inform users about issues or errors on a website or application.
The “alert-warning” class in Bootstrap is used to give an alert and indicate a warning message to the user. You can use it to convey different types of messages to the user, such as success, danger, info, and others, by using different classes like alert-success, alertdanger, alert-info, etc.
Approaches
We have two different approaches to creating warning notification alerts in bootstrap including the following −
Using the “Alert with link”
Using the “Dismissible Alert”
Let us look at each step in detail.
Approach 1: Using the "Alert with link method"
The first approach is to create warning notification alerts in bootstrap as “Alert with link”. alert with a link is a warning message that contains a link to provide additional information or to take the user to a specific page. This type of alert is commonly used to notify users about potential issues or errors on a website or application. To create an alert with a link in Bootstrap, you can use the “alert-link” class on an anchor tag (<a>) within an alert element.
Example
Following is an example to create warning notification alerts in bootstrap using the “Alert with link method”.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Alert with Link</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="container py-5">
<h4 class="text-center text-uppercase">
Bootstrap Alert with Link
</h4>
<div class="alert alert-warning">
<strong>Warning!</strong>
There was a problem with the connection. <a href="#" class="alert-link">Please contact support.</a>
</div>
</div>
</body>
</html>
Approach 2: Using the “Dismissible method"
The second approach is to create warning notification alerts in bootstrap as “Dismissible Alert”. It allows the user to easily dismiss the alert by clicking on a close button. By adding the "alert-dismissible" class to the alert, which displays a close button that the user can click to dismiss the alert.
Example
Following is an example to create warning notification alerts in bootstrap using the “Dismissible Alert method”.
<!DOCTYPE html>
<html>
<head>
<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 ">
<h4 class="text-center text-uppercase">
Example of a warning alert with a button
</h4>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="alert-heading">Warning</h5>
<p>"This is a warning message. Please be aware that the content of this page may be outdated and should be used for informational purposes only. Any decisions or actions taken based on this information are the sole responsibility of the user. We recommend seeking professional advice before making any important decisions. Thank you for your understanding."</p>
<hr>
<p>Click the button to dismiss this alert.</p>
<button type="button" class="btn btn-secondary mt-3" datadismiss="alert">Dismiss</button>
</div>
</div>
</body>
</html>
Conclusion
In this article, we examined two different approaches to create warning notification alerts in bootstrap. Here, we are using two different approaches “Alert with Link” and the “Dismissible Alert”.The "Alert with link" method involves creating a warning message that contains a link to provide additional information or to take the user to a specific page. The "Dismissiblr Alert" method involves creating a warning message that can be dismissed by the user. The two approaches each have their advantages and are used depending on the specific needs of the project.
158 Views
