How to Create Alerts in Bootstrap ? Last Updated : 29 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Bootstrap Alerts offer a simple method for crafting predefined messages, enhancing their appeal to users. They streamline message display, adding style for increased engagement and improved user experience by presenting important information effortlessly and appealingly.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> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Example</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </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> <!-- Bootstrap Bundle with Popper --> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </body> </html> Output: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/[email protected]/dist/css/bootstrap.min.css"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h2> Bootstrap Alerts </h2> <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: Comment More infoAdvertise with us Next Article How to Create Alerts in Bootstrap ? A anjalibo6rb0 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to create dismissible alerts in Bootstrap ? Alerts are a very important component in the Bootstrap library. They are used to display any message to the users like a form being submitted, OTP being sent, or incorrect input entered in the form. In other words, alerts are used to provide feedback messages to the user based on their interaction w 2 min read How to create warning notification alerts in Bootstrap ? Before or after performing an action, we frequently encounter specific notifications on some websites. These alert messages are highlighted text that should be taken into account when executing a task. Using preset classes in Bootstrap, these alert messages can be displayed on the website.Approach: 3 min read How to Create a Bootstrap Dismissible Alert ? Bootstrap is a free and open-source tool for making responsive and beautiful web pages very easily. Alerts are used to notify the users and the visitors of the webpage about some action or information. Also, we can provide the user with dismissing the alert. But Simple alerts are not so good-looking 3 min read Bootstrap 5 Alerts Link color Bootstrap 5 Alerts Link Color class is used to set the color of the alert element. There are different kind of alerts that indicates different things, if there is a success then the color of the alert will be green, if it's a failure then it should show a red color alert. Each color of the alert rep 3 min read React-Bootstrap Alerts API React-bootstrap is a front-End Stylesheet library. It replaces the Bootstrap JavaScript into completely a react component. It creates a seamless front-end development experience. In this article, we will see React Bootstrap Alerts API. The alert components help to show messages for typical user acti 2 min read Like