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.


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

<!DOCTYPE html>  
<html lang="en">  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="">  
  <script src=""></script>  
  <script src=""></script>  
<div class="container">  
  <div class="alert alert-success">  
    <strong>Success!</strong> This alert box indicates a successful or positive action.  
  <div class="alert alert-info">  
    <strong>Info!</strong> This alert box indicates a neutral informative change or action.  
  <div class="alert alert-warning">  
    <strong>Warning!</strong> This alert box indicates a warning that might need attention.  
  <div class="alert alert-danger">  
    <strong>Danger!</strong> This alert box indicates a dangerous or potentially negative action.  

Check the output of the above code example.

Bootstrap, Use, Alert

All the best 👍