Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin. Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
You can see this in action with a live demo where we also included icons to the Alert's content and different alert colors:
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="fas fa-check fs-22 mr-15 va-middle"></span> <span><strong>Well done!</strong> Successfully read this message.</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
<span class="fas fa-exclamation-circle fs-22 mr-15 va-middle"></span> <span><strong>Heads up!</strong> This alert needs your attention.</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="fas fa-exclamation-triangle fs-22 mr-15 va-middle"></span> <span><strong>Warning!</strong> Better check yourself.</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<span class="fas fa-radiation-alt fs-22 mr-15 va-middle"></span> <span><strong>Oh snap!</strong> Change a few things and try again.</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->