Open In App

How to Create Alerts in Bootstrap ?

Last Updated : 04 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In Bootstrap, alerts are the most important component to provide customized feedback messages and warnings. Using this alert component, we can properly deliver the information warnings, success messages, and errors to the user.

Syntax:

<div class="alert alert-success" role="alert"></div>

Approach:

  • We will use the .alert class along with the contextual classes that are used to display the alert message in the application.
  • The alert classes like .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light, and .alert-dark are been used to represent the alert message with different behavior.
  • We will generate the dynamic alert message when the user clicks on the button.

Example 1: The below code creates simple alert messages to show to the users.

HTML




<!DOCTYPE html>
 
<head>
    <title>Bootstrap Example</title>
    <!-- Bootstrap CDN Links -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
 
    <div class="container">
        <h1 style="color: green;">
            GeeksforGeeks Alerts
        </h1>
        <h3>Example 1</h3>
        <div class="alert alert-success" role="alert">
            <strong>Success!</strong>
            GeeksforGeeks: Your coding journey is
            on the right track.
        </div>
        <div class="alert alert-info" role="alert">
            <strong>Info!</strong>
            GeeksforGeeks: Stay updated with the
            latest programming news and tutorials.
        </div>
        <div class="alert alert-warning" role="alert">
            <strong>Warning!</strong>
            GeeksforGeeks: Pay attention to
            important coding tips and tricks.
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>Danger!</strong>
            GeeksforGeeks: Be cautious while
            exploring advanced programming concepts.
        </div>
        <div class="alert alert-primary" role="alert">
            <strong>Primary!</strong>
            GeeksforGeeks: Important actions to
            boost your coding skills.
        </div>
        <div class="alert alert-secondary" role="alert">
            <strong>Secondary!</strong>
            GeeksforGeeks: Explore slightly less
            critical but valuable coding topics.
        </div>
        <div class="alert alert-dark" role="alert">
            <strong>Dark!</strong>
            GeeksforGeeks: Dive into the depth
            of dark grey coding challenges.
        </div>
        <div class="alert alert-light" role="alert">
            <strong>Light!</strong>
            GeeksforGeeks: Illuminate your coding
            path with light grey insights.
        </div>
    </div>
 
</body>
 
</html>
 






                        










Output:


Screenshot-2024-02-28-at-21-35-42-Bootstrap-Example


Example 2: The below code shows the alert message for the clicked button.






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


     


<head>


    <title>Bootstrap Example</title>


    <link rel="stylesheet" href=


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">


    <script src=


"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">


    </script>


    <script src=


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js">


    </script>


</head>


 


<body>


    <div class="container">


        <h1 style="color: green;">


            GeeksforGeeks Alerts


        </h1>


        <h3>Example 2</h3>


        <button class="btn btn-success"


            onclick="showAlert('success')">


            Show Success Alert


        </button>


        <button class="btn btn-info"


            onclick="showAlert('info')">


            Show Info Alert


        </button>


        <button class="btn btn-warning"


            onclick="showAlert('warning')">


            Show Warning Alert


        </button>


        <button class="btn btn-danger"


            onclick="showAlert('danger')">


            Show Danger Alert


        </button>


        <div id="alertContainer"></div>


    </div>


    <script>


        function showAlert(type) {


            const cont = 


                document.getElementById('alertContainer');


            while (cont.firstChild) {


                cont.removeChild(cont.firstChild);


            }


            cont.appendChild(document.createElement('br'));


            const msg = 


                "GeeksforGeeks: This is a " + 


                type + " alert.";


            const aDiv = document.createElement('div');


            aDiv.classList.


                add('alert', 'alert-' + 


                    type, 'alert-dismissible', 


                    'fade', 'show');


            aDiv.setAttribute('role', 'alert');


            aDiv.innerHTML = 


            '<strong>' + 


                type.charAt(0).toUpperCase() + type.slice(1) + 


            '!</strong> ' + msg +


            `<button type="button"


                class="btn-close" data-bs-dismiss="alert"


                aria-label="Close">


            </button>`;


            cont.appendChild(aDiv);


            setTimeout(function () {


                aDiv.classList.remove('show');


            }, 3000);


        }


    </script>


</body>


 


</html>



















                        







                        










Output:


bootAlertGIF


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        React-Bootstrap Alerts Component
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        What are Class Components in React?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to create warning notification alerts in Bootstrap ?
            

        
    
        
            

                How to create dismissible alerts in Bootstrap ?
            

        
    
        
            

                Bootstrap Alerts , Wells, Pagination and Pager
            

        
    
        
            

                Bootstrap 4 | Alerts
            

        
    
        
            

                How to Automatically Close Alerts using Twitter Bootstrap ?
            

        
    
        
            

                React-Bootstrap Alerts Component
            

        
    
        
            

                Angular ngx Bootstrap Alerts Component
            

        
    
        
            

                Bootstrap 5 Alerts Dismissing
            

        
    
        
            

                Bootstrap 5 Alerts Icons
            

        
    
        
            

                Bootstrap 5 Alerts Link color
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        anjalibo6rb0                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox