« Previous Next »

Extended Bootstrap Alerts

What is Alert?

Alerts in Bootstrap are simple and flexible notifications designed to convey messages to the user. They can be used for displaying various types of feedback, including success messages, warnings, errors, or informational notifications.

Alerts are useful for:

  • Grabbing user attention to important information.
  • Notifying users about the status of their actions (e.g., form submission success or failure).
  • Providing context for various actions and potential issues.

Predefined Alerts

Alert Code Examples


  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Jumbotron Example</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>

       <div class="container mt-5"">
              
          <!-- Success Alert -->
          <div class="alert alert-success" role="alert">
              This is a success alert—check it out!
          </div>
      
          <!-- Info Alert -->
          <div class="alert alert-info" role="alert">
              This is an info alert—useful information.
          </div>
      
          <!-- Warning Alert -->
          <div class="alert alert-warning" role="alert">
              This is a warning alert—please be careful!
          </div>
      
          <!-- Danger Alert -->
          <div class="alert alert-danger" role="alert">
              This is a danger alert—something went wrong!
          </div>
      
          <!-- Dismissible Alert -->
          <div class="alert alert-warning alert-dismissible fade show" role="alert">
              Warning! This alert will be dismissed if you click the close button.
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
      
          <!-- Link Alert -->
          <div class="alert alert-info" role="alert">
              This is an info alert with a link. You can use this to provide more information.
          </div>
      
          <!-- Custom Alert with Icons -->
          <div class="alert alert-success" role="alert">
              ✔ Success! Your settings have been saved successfully.
          </div>
          
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
          
      </div>
  </body>
  </html>

Output Example


         
        
       
       
        This is a success alert—check it out!
« Previous Next »