Bootstrap 5 Alerts Additional Content Last Updated : 29 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Bootstrap Alerts help inform users about particular events or give acknowledgment. But most of the time, only simple text alerts aren't enough to convey the message. There needs to be some additional content with a proper hierarchy. In such cases, Additional Content comes into the picture. It allows developers to put the extra information & details about alerts in a clean, hierarchical manner. We need to use the class alert to create an alert. Let's see the syntax and some examples. Prerequisite: Bootstrap 5 Alert Component, to create an alert. Alerts Additional content Class: There is no class required for this, we only put HTML elements that will be additional components of the alerts like header, paragraphs, buttons and dividers. Syntax: <div class="alert"> <!-- Additional content --> <h2 class="alert-heading">....</h2> <hr> <p>......</p> </div> Below example illustrate the Bootstrap 5 Alerts Additional Content: Example 1: Example of how we can display additional content in Bootstrap 5. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body class="m-3"> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong class="m-3">Bootstrap 5 Alerts Additional Content</strong> <br /> <div class="alert alert-success"> <!-- Additional content inside alert box --> <h4 class="alert-heading">Huge Discount</h4> <p> Did you checkout the GeeksforGeeks courses. Do check and get one for yourself! The validity of courses are lifetime, you can do that according to your own pace. </p> <hr> <p>Additional Feature: 24 X 7 Doubt Assistance for 6 Months</p> </div> </center> </body> </html> Output: Bootstrap 5 Alerts Additional Content Example 2: This example shows the demonstration of links and buttons inside the alert content. HTML <!DOCTYPE html> <html> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> </head> <body class="m-3"> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Alerts Additional Content</strong> </center> <div class="alert alert-primary"> <!-- Additional content inside alert box --> <h4 class="alert-heading">Job-a-Thon</h4> <p> Monthly hiring challenges conducted by <a href="#" class="alert-link">GeeksforGeeks</a> connecting suitable candidates to tech companies. You can get a chance to interview with top companies for leading job roles in Data Science, Machine Learning and Analytics </p> <hr /> <button type="button" class="btn btn-success">Subscribe Now!</button> </div> </body> </html> Output: Bootstrap 5 Alerts Additional Content Reference: https://getbootstrap.com/docs/5.0/components/alerts/#additional-content Comment More infoAdvertise with us Next Article Bootstrap 5 Alerts Icons U user282 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Similar Reads 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 Bootstrap 5 Alerts Additional Content Bootstrap Alerts help inform users about particular events or give acknowledgment. But most of the time, only simple text alerts aren't enough to convey the message. There needs to be some additional content with a proper hierarchy. In such cases, Additional Content comes into the picture. It allows 2 min read Bootstrap 5 Alerts Icons Bootstrap 5 Alerts Icons are used to add icons to the alert bar to format the bar and make it more informative. To include the icon using <svg> tag we have to define its path inside the <path> tag in svg tag. We also need to specify its height and width to adjust its size according to th 2 min read Bootstrap 5 Alerts Dismissing Bootstrap 5 Alerts Dismissing provides a feature to dismiss the alerts inline and to enable alerts dismissing we need to add the .alert-dismissible class to the alert, and the data-bs-dismiss="alert" attribute to the close button.Syntax:<div class="alert alert-dismissible"> <button type="bu 2 min read Bootstrap 5 Alerts SASS Bootstrap 5 Alerts SASS can be used to change the default values provided for the alert by customizing the SCSS file. SASS variables of Alerts: $alert-padding-y: This variable provides the top and bottom padding of the alert. By default, it is 1rem.$alert-padding-x: This variable provides the left a 5 min read Bootstrap 5 Alerts JavaScript behavior Bootstrap 5 Alerts JavaScript behavior provides to enable the dismissal of an alert when an action is triggered. In addition to this, alert instances can be created with the help of the alert constructor. Although, there are a few events that enable the alert functionality by implementing Bootstrap’ 2 min read Bootstrap 5 Alerts JavaScript behavior Triggers Bootstrap 5 Alert Triggers are used to close an alert. An alert can be closed using a close button inside the alert or by using a button outside the alert with a data-bs-target attribute. It should be noted that closing the alert also removes it from the DOM.Bootstrap 5 Alert Triggers used attribute 2 min read Bootstrap 5 Alerts JavaScript Behavior Methods Bootstrap 5 Alerts methods that are used to control the visibility of the alert component. For example, these methods can be used to close or dispose of an alert component. It is useful for displaying popup messages or user action notifications on a webpage.Bootstrap 5 Alerts Methodsclose(): It is u 2 min read Bootstrap 5 Alerts JavaScript behavior Events In this article, we will learn about the Alerts JavaScript behavior Events fired when interacting with Bootstrap 5 Alerts. Bootstrap 5 Alert component is useful for providing alerts or feedback messages arising from the user interacting with the functionalities of the application.Bootstrap 5 Alerts 2 min read Like