How to use alert in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use alert in bootstrap with code example.

Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users.

There are four classes that are used within <div> element for alerts.

Example:

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap 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/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Alerts</h2>  
  <div class="alert alert-success">  
    <strong>Success!</strong> This alert box indicates a successful or positive 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 or potentially negative action.  
</div>  
</div>  
  
</body>  
</html> 

Check the output of the above code example.

Bootstrap, Use, Alert

All the best 👍