Bootstrap5 Alert example with close button and Link text

Last updated Sep 23, 2021

Bootstrap5 Alert messages are used to notify the user about certain alerts depending upon their actions. Hence, to provide fruitful results, it is necessary for the users to follow the flexible alerts. Several ways are available to use Alerts within the code

 

In this example we create alert with close button and add link text inside alert box.

 

Close Alerts

<div class="alert alert-success alert-dismissible" role="alert">
   <strong>Congratulations!</strong> You can close alert by close icon!
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>

 

To add Text link inside alert

<h2>Alert with Link</h2>
       <div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Your are beginner!</strong> Let's start Learn Bootstrap <a href="https://rrtutors.com/bootstrap5" class="alert-link">Bootstrap5</a>.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

 

Differnt Alerts with Bootstrap5 examples

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Alert Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Alerts</h2>
         <div class = "alert alert-primary" role = "alert">
            primary  alert - Welcome to RRTutors!!!
         </div>
       <h2>Close Alerts</h2>
      <p>We can can create dismissible alerts by adding a close button and the .alert-dismissible class. On the close button, add the data-bs-dismiss="alert" attribute</p>
      <div class="alert alert-success alert-dismissible" role="alert">
         <strong>Congratulations!</strong> You can close alert by close icon!
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
        <h2>Alert with Link</h2>
         <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Your are beginner!</strong> Let's start Learn Bootstrap <a href="https://rrtutors.com/bootstrap5" class="alert-link">Bootstrap5</a>.
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>

      <h2>Fading Effect</h2>
      <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Congratulations!</strong> You successfully Finished Bootstrap5 alert!
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>


         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to RRTutors!!!
         </div>

         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to RRTutors!!!
         </div>

         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to RRTutors!!!
         </div>

         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to RRTutors!!!
         </div>

         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to RRTutors!!!
         </div>

         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to RRTutors!!!
         </div>

         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to RRTutors!!!
         </div>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


   </body>
</html>

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

568 Views