Bootstrap 4 - Alerts

The alert component specifies the predefined message for an user actions. It is used to send the information such as warning, error or confirmation messages to the end users.
You can create an alert box, by adding a class of .alert and along with contextual classes such as .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark.
The following example demonstrates usage of above contextual classes −
<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 rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Alerts</h2>
         <div class = "alert alert-primary" role = "alert">
            primary  alert - Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to Tutorialspoint!!!
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
To get links in alerts, use the .alert-link utility class in the <a> tag as shown in the below example −
<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 rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Links in Alerts</h2>
         <div class = "alert alert-primary" role = "alert">
            primary  alert - Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-secondary" role = "alert">
            secondary alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-success" role = "alert">
            success alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-danger" role = "alert">
            danger alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-warning" role = "alert">
            warning alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-info" role = "alert">
            info alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
         
         <div class = "alert alert-light" role = "alert">
            light alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>    
         </div>
         
         <div class = "alert alert-dark" role = "alert">
         <div class = "alert alert-dark" role = "alert">
            dark alert — Welcome to 
            <a href = "https://www.tutorialspoint.com/" target = "_blank" 
               rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
To build a dismissal alert, use the .alert-dismissable class to alert container. Add the data-dismiss="alert" attribute on the button element to close a button, which automatically dismisses the alert message box.
The following example demonstrates dismissal of alert box −
<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 rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   <body>
      <div class = "container">
         <h2>Dismissal Alerts</h2>
         <div class = "alert alert-success alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Success!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-primary alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Primary!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-secondary alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Secondary!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-danger alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Danger!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-warning alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Warning!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-info alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Info!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-light alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Light!</strong> Welcome to Tutorialspoint!!!
         </div>
         
         <div class = "alert alert-dark alert-dismissible">
            <button type = "button" class = "close" data-dismiss = "alert">×</button>
            <strong>Dark!</strong> Welcome to Tutorialspoint!!!
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page