StackTips

Bootstrap Warning, Info, Success and Error Alerts Example

bibhu_bib avtar

Written by:

Bibhudatta,  4 min read,  updated on September 17, 2023

Alerts are used to for information purpose. Bootstrap supports following different styles of contextual alert classes,

  • Alert-info
  • Alert-success
  • Alert-danger
  • Alert-warning

Example,
Bootstrap Alerts Example

<!DOCTYPE html> 
<html lang="en">  
<head>    
<title>My first Bootstrap page </title>    
<meta name="viewport" content="width=device-width, initialscale=1">    
<link href="CSS/bootstrap.min.css" rel="stylesheet">   
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet">    
<script type="text/javascript" src="JS/bootstrap.min.js"></script> 
 </head> 
 <body>
<div class="container">
	<div class="container">
	 <h2>Alerts</h2>
	 <div class="alert alert-success">
	    <strong>Success!</strong> This alert box indicates a successful action.
	  </div>
	  <div class="alert alert-info">
	    <strong>Info!</strong> This alert box indicates a neutral informative change or action.
	  </div>
	  <div class="alert alert-warning">
	    <strong>Warning!</strong> This alert box indicates a warning that might need attention.
	  </div>
	  <div class="alert alert-danger">
	    <strong>Danger!</strong> This alert box indicates a dangerous action.
	  </div>
	 </div>
</div>
</body>
</html>

Dismissible alerts

Any alert can be made dismissible by adding an optional .alert-dismissible class and close button. For dismissible alert to work you need to include the jQuery and bootstrap JavaScript plugin. Include the following javascript inside <head> .. </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="JS/bootstrap.min.js"></script>

Now to create dismissible alert,

<div class="alert alert-warning alert-dismissible" >
     <button type="button" class="close" data-dismiss = "alert" aria-label="Close">
     <span >&times;</span></button> 
     <strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>

Bootstrap Dismissible Alerts Example

Animated Alerts

The .fade and .in classes add a fading effect while closing the alert message.

<div class="alert alert-success fade in">
     <a href="#" class="close" data-dismiss="alert" aria- label="close">&times;</a>
     <strong>Success!</strong> This alert box indicates a successful action.
</div>

Links in alerts

Use the .alert-link utility class to provide matching colored links within any alert.

<div class="alert alert-warning" >
    <strong> Warning!</strong> This alert box indicates a warning that might need attention.
    <a href="#" class="alert-link">Click here</a>
</div>

Keep exploring

Let’s be friends!