Bootstrap 5 Alerts Additional Content
Last Updated :
29 Nov, 2022
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 =
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" >
< 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 =
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" >
< 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
Share your thoughts in the comments
Please Login to comment...