Bootstrap Alert

The outer <div> with .alert and a contextual variant class (e.g. .alert-warning). Sets the background, border, and text color for the entire component via CSS custom properties.

Carries role="alert" so assistive technology announces the content immediately when it is injected into the DOM.

A Bootstrap Icons SVG that visually reinforces the alert's severity. aria-hidden="true" prevents redundant announcements — the heading and body text carry the meaning.

Color is inherited from the root's contextual variant, so it automatically matches without additional CSS.

An optional .alert-heading element — typically an <h4> — that provides a short summary of the alert.

When present, it becomes the primary label for the alert region. Screen readers will announce it as part of the live region update.

The main descriptive content of the alert. Can contain inline elements, links (.alert-link), or block elements.

Bootstrap's .alert-link class gives anchor tags a matching underline color that stays accessible against the alert background.

The close button — <button class="btn-close"> with data-bs-dismiss="alert".

Bootstrap's JavaScript handles removing the alert from the DOM. Carries aria-label="Close" since the button has no visible text. The .alert-dismissible class on the root adds padding-end to prevent the body text from sitting behind the button.