StackTips
 4 minutes

Bootstrap Warning, Info, Success and Error Alerts Example

By Bibhudatta @bibhu_bib, On Sep 17, 2023 Bootstrap 2.68K Views

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>
bibhu_bib avtar

Bibhudatta

She loves coding for web and working with Microsoft Technologies. She has developed enterprise applications with B2B and B2C business models for worlds leading Financial and Retail chain market.