Post
Ask Question

5 Ways to Use Bootstrap Alerts, Warning, Error, Success & Info Messages

Introduction

 
This article demonstrates you a different way of using bootstrap warning, success, info, and error alert message in your projects. Bootstrap 4 provides an easy way to create predefined alert messages. It provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional dismiss button.
 
Bootstrap 4 Alert CSS Classes
 
.alert Creates an alert message box
.alert-dismissible Indicates a closable alert box. Together with the .close class, this class is used to close the alert (adds extra padding)
.alert-heading Adds color:inherit to the specified element
.alert-link Used on links inside alerts to provide matching colored links
.close Styles the close button for the alert message (floats right with a specified font-size, color, etc.)
 
Bootstrap 4 alert contextual classes
 
.alert-primary Blue alert. Indicates an important action
.alert-secondary Grey alert. Indicates a "less" important action
.alert-danger Red alert. Indicates a dangerous or potentially negative action
.alert-success Green alert. Indicates a successful or positive action
.alert-info Light-blue alert. Indicates a neutral informative change or action
.alert-light Light alert. Light grey alert box
.alert-dark Dark alert. Dark grey alert box
.alert-warning Yellow alert. Indicates caution should be taken with this action
 
Close Alerts Via data-* Attributes
 
Add data-dismiss="alert" to a link or a button, element to close the alert message.
 
To use Bootstrap 4 alert in your project, you need have the following downloaded or cdn link scripts.
  1. link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
Close Alerts via JavaScript
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.             $(".close").click(function () {  
  4.                 $("#myAlert").alert("close");  
  5.             });  
  6.         });  
  7. </script>  
Alert Methods
 
.alert("close") Closes the alert message
.alert("dispose") Destroys an element's alert.
 
Alert Events
 
close.bs.alert Occurs when the alert message is about to be closed
closed.bs.alert Occurs when the alert message has been closed (will wait for CSS transitions to complete)
 
Example of warning alert message in Bootstrap 4 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Warning Alerts</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-center text-uppercase">Bootstrap 4 warning messages</h4>  
  13.         <h6>Basic Warning alert</h6>  
  14.         <div class="alert alert-warning">  
  15.             <strong>Warning!</strong> There was a problem with connection.  
  16.         </div>  
  17.         <h6>Warning alert with link</h6>  
  18.         <div class="alert alert-warning">  
  19.             <strong>Warning!</strong> There was a problem with internet connection<a href="#" class="alert-link"> Contact us</a>.  
  20.         </div>  
  21.         <h6>Warning alert with close button</h6>  
  22.         <div class="alert alert-warning">  
  23.             <button type="button" class="close" data-dismiss="alert">×</button>  
  24.             <strong>Warning!</strong> There was a problem with connection.  
  25.         </div>  
  26.         <h6>Warning alert with close button and fade animation</h6>  
  27.         <div class="alert alert-warning alert-dismissible fade show">  
  28.             <button type="button" class="close" data-dismiss="alert">×</button>  
  29.             <strong>Warning!</strong> There was a problem with connection.  
  30.         </div>  
  31.         <h6>Warning alert with heading</h6>  
  32.         <div class="alert alert-warning alert-dismissible fade show">  
  33.             <button type="button" class="close" data-dismiss="alert">×</button>  
  34.             <h5 class="alert-heading">Warning!</h5> There was a problem with connection.  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38. </html>  
Output
 
Output
 
Example of success alert message in Bootstrap 4
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Succuss Alerts</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-center text-uppercase">Bootstrap 4 Succuss messages</h4>  
  13.         <h6>Basic Succuss alert</h6>  
  14.         <div class="alert alert-success">  
  15.             <strong>Succuss!</strong> Your message has been sent successfully..  
  16.         </div>  
  17.         <h6>Succuss alert with link</h6>  
  18.         <div class="alert alert-success">  
  19.             <strong>Succuss!</strong> Your message has been sent successfully. <a href="#" class="alert-link">View our service page</a>  
  20.         </div>  
  21.         <h6>Succuss alert with close button</h6>  
  22.         <div class="alert alert-success">  
  23.             <button type="button" class="close" data-dismiss="alert">×</button>  
  24.             <strong>Succuss!</strong> Your message has been sent successfully..  
  25.         </div>  
  26.         <h6>Succuss alert with close button and fade animation</h6>  
  27.         <div class="alert alert-success alert-dismissible fade show">  
  28.             <button type="button" class="close" data-dismiss="alert">×</button>  
  29.             <strong>Succuss!</strong> Your message has been sent successfully..  
  30.         </div>  
  31.         <h6>Succuss alert with heading</h6>  
  32.         <div class="alert alert-success alert-dismissible fade show">  
  33.             <button type="button" class="close" data-dismiss="alert">×</button>  
  34.             <h4 class="alert-heading">Succuss!</h4> Your message has been sent successfully..  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38. </html>  
Output
 
Output
 
Example of info alert message in Bootstrap 4
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Info Alerts</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-center text-uppercase">Bootstrap 4 Info messages</h4>  
  13.         <h6>Basic Info alert</h6>  
  14.         <div class="alert alert-info">  
  15.             <strong>Note!</strong> Please read the comments carefully.  
  16.         </div>  
  17.         <h6>Info alert with link</h6>  
  18.         <div class="alert alert-info">  
  19.             <strong>Note!</strong> Please read the <a href="#" class="alert-link">comments</a> carefully.  
  20.         </div>  
  21.         <h6>Info alert with close button</h6>  
  22.         <div class="alert alert-info">  
  23.             <button type="button" class="close" data-dismiss="alert">×</button>  
  24.             <strong>Note!</strong> Please read the comments carefully.  
  25.         </div>  
  26.         <h6>Info alert with close button and fade animation</h6>  
  27.         <div class="alert alert-info alert-dismissible fade show">  
  28.             <button type="button" class="close" data-dismiss="alert">×</button>  
  29.             <strong>Note!</strong> Please read the comments carefully.  
  30.         </div>  
  31.         <h6>Info alert with heading</h6>  
  32.         <div class="alert alert-info alert-dismissible fade show">  
  33.             <button type="button" class="close" data-dismiss="alert">×</button>  
  34.             <h4 class="alert-heading">Note!</h4> Please read the comments carefully.  
  35.         </div></div>  
  36. </body>  
  37. </html>  
Output
 
Output
 
Example of danger alert message in Bootstrap 4
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Danger Alerts</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-center text-uppercase">Bootstrap 4 Danger(Error) messages</h4>  
  13.         <h6>Basic Danger(Error) alert</h6>  
  14.         <div class="alert alert-danger">  
  15.             <strong>Error!</strong> A problem has been occurred while submitting your data.  
  16.         </div>  
  17.         <h6>Danger(Error) alert with link</h6>  
  18.         <div class="alert alert-danger">  
  19.             <strong>Error!</strong> A problem has been <a href="#" class="alert-link">occurred</a> while submitting your data.  
  20.         </div>  
  21.         <h6>Danger(Error) alert with close button</h6>  
  22.         <div class="alert alert-danger">  
  23.             <button type="button" class="close" data-dismiss="alert">×</button>  
  24.             <strong>Error!</strong> A problem has been occurred while submitting your data.  
  25.         </div>  
  26.         <h6>Danger(Error) alert with close button and fade animation</h6>  
  27.         <div class="alert alert-danger alert-dismissible fade show">  
  28.             <button type="button" class="close" data-dismiss="alert">×</button>  
  29.             <strong>Error!</strong> A problem has been occurred while submitting your data.  
  30.         </div>  
  31.         <h6>Danger(Error) alert with heading</h6>  
  32.         <div class="alert alert-danger alert-dismissible fade show">  
  33.             <button type="button" class="close" data-dismiss="alert">×</button>  
  34.             <h4 class="alert-heading">Error!</h4> A problem has been occurred while submitting your data.  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38. </html>   
Output
 
Output


Similar Articles