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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/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>