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 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.

Output:

👁 Bootstrap 5 Alerts Additional Content

Example 2: This example shows the demonstration of links and buttons inside the alert content.

Output:

👁 Bootstrap 5 Alerts Additional Content

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#additional-content