Bootstrap 4 Alerts

Bootstrap 4 Alerts

Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts.

Alerts can be created by using .alert class. In addition, there are eight contextual classes of alerts which provide style to the alerts are given below:-

  • .alert-success
  • .alert-primary
  • .alert-secondary
  • .alert-danger
  • .alert-warning
  • .alert-Info
  • .alert-light
  • .alert-dark

Example

 <!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.4.1/css/bootstrap.min.css">
  </head>
 <body>
 <div class="container">
   <h2>Bootstrap Alerts</h2>
   <div class="alert alert-success">
     <strong>Success!</strong> 
   </div>
   <div class="alert alert-info">
     <strong>Info!</strong> 
   </div>
   <div class="alert alert-warning">
     <strong>Warning!</strong>
   </div>
   <div class="alert alert-danger">
     <strong>Danger!</strong> 
   </div>
   <div class="alert alert-primary">
     <strong>Primary!</strong> 
   </div>
   <div class="alert alert-secondary">
     <strong>Secondary!</strong>
   </div>
   <div class="alert alert-dark">
     <strong>Dark!</strong> 
   </div>
   <div class="alert alert-light">
     <strong>Light!</strong> 
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html> 

Output

Bootstrap 4 Alerts

Alert Links

Alert links are used to create links inside the alerts box. The color of those links and the color of the alert box will be similar. The .alert-link class is used to create alert links.

Example

 <!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.4.1/css/bootstrap.min.css">
   
 </head>
 <body>
  
 <div class="container">
   <h2>Alert Links</h2>
   <p>The alert-link class is used to create "matching colored links" inside the alert box .</p>
   <div class="alert alert-success">
     <a href="#" class="alert-link">Success!</a>.
   </div>
   <div class="alert alert-info">
     <a href="#" class="alert-link">Info!</a>.
   </div>
   <div class="alert alert-warning">
     <a href="#" class="alert-link">Warning!</a>.
   </div>
   <div class="alert alert-danger">
     <a href="#" class="alert-link">Danger!</a>.
   </div>
   <div class="alert alert-primary">
     <a href="#" class="alert-link">Primary!</a>.
   </div>
   <div class="alert alert-secondary">
     <a href="#" class="alert-link">Secondary!</a>.
   </div>
   <div class="alert alert-dark">
     <a href="#" class="alert-link">Dark!</a>.
   </div>
   <div class="alert alert-light">
     <a href="#" class="alert-link">Light!</a>.
   </div>
 </div>
  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html> 

Output

Bootstrap 4 Alerts

Closing Alerts

Closing alerts offer an “x” (closing button) option inside the alert box. When you click on x, it will close the alert message.

Steps for closing alert

  • Add the .alert-dismissible class within the alert container.
  • Add class =”close” and data-dismiss=”alert” into <button> tag or link (<a>) tag.

Example

  
 <!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.4.1/css/bootstrap.min.css">
   
 </head>
 <body>
 <div class="container">
   <h2>Closing Alerts</h2>
   <div class="alert alert-success alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Success Alert</b> 
   </div>
   <div class="alert alert-info alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Info Alert</b> 
   </div>
   <div class="alert alert-warning alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Warning Alert</b> 
   </div>
   <div class="alert alert-danger alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Danger Alert</b> 
   </div>
   <div class="alert alert-primary alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Primary Alert</b> 
   </div>
   <div class="alert alert-secondary alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Secondary Alert</b> 
   </div>
   <div class="alert alert-dark alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Dark Alert</b>
   </div>
   <div class="alert alert-light alert-dismissible">
     <button type="button" class="close" data-dismiss="alert">×</button>
     <b>Light Alert</b> 
   </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
 </body>
 </html> 
01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 <!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.4.1/css/bootstrap.min.css"> </head> <body> <div class="container">   <h2>Closing Alerts</h2>   <div class="alert alert-success alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Success Alert</b>     </div>   <div class="alert alert-info alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Info Alert</b>   </div>   <div class="alert alert-warning alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Warning Alert</b>     </div>   <div class="alert alert-danger alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Danger Alert</b>   </div>   <div class="alert alert-primary alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Primary Alert</b>   </div>   <div class="alert alert-secondary alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Secondary Alert</b>   </div>   <div class="alert alert-dark alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Dark Alert</b>   </div>   <div class="alert alert-light alert-dismissible">     <button type="button" class="close" data-dismiss="alert">×</button>     <b>Light Alert</b>   </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script> </body> </html>  

Output

Bootstrap 4 Alerts