On this page

Alerts

Bootstrap’s alert plugin removes a dismissible alert from the page. A static alert needs no script. Closing one does, so this page uses <pe-alert> instead of data-bs-dismiss.

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is `bootstrap.bundle.min.js` at 23.3 KB gzip, not the sum of these rows.
	What runs it	JavaScript
Bootstrap 5.3	Alert plugin	5.0 KB gzip
This repo	pe-alert. command=--dismiss and commandfor. Required to remove the node.	0.5 KB gzip

When that API is missing, this page also loads invoker-commands.js (0.8 KB gzip). See Polyfills.

Markup this component accepts. The full inventory is /components.json.
Required	`<pe-alert>` · `src/behaviors/alert.js` . Removes the alert on `command="--dismiss"`. A static alert does not use the element.
Avoid	`commandfor` is the alert id with no `#`. The close button has to sit inside the `<pe-alert>`; the `command` event does not bubble.

How it works

The element is the alert. Put class="alert" on it. The close button uses command="--dismiss" and commandfor set to the alert’s id, with no #. The command event does not bubble, so <pe-alert> listens on itself. Load src/behaviors/alert.js only when a page has a close button. Without that module the alert stays.

.fade.show fades out before the node is removed. Without .fade, or when the user prefers reduced motion, it is removed at once. The listener, the transition handler, and the fallback timer are dropped in disconnectedCallback.

Static

Color and role=alert. Nothing to close, so no script.

A simple primary alert — check it out!

<div class="alert alert-primary" role="alert">
  A simple primary alert — check it out!
</div>

Dismissible

Close fades the alert out, then removes it. commandfor is the id, without a hash.

Holy guacamole! You should check in on some of those fields below.

<script type="module" src="./node_modules/bootstrap-html/src/behaviors/alert.js"></script>

<pe-alert class="alert alert-warning alert-dismissible fade show" id="dismiss-alert" role="alert">
  <div><strong>Holy guacamole!</strong> You should check in on some of those fields below.</div>
  <button type="button" class="btn-close" command="--dismiss" commandfor="dismiss-alert" aria-label="Close"></button>
</pe-alert>

Accessibility

Keep role="alert" on an important message so assistive technology announces it. A static informational banner can be a div without that role.

The close button needs an accessible name (aria-label="Close" on .btn-close). Removing the node is the dismiss; there is no aria-hidden step.

Browser support

Three columns, not one baseline. The same row is on the overview.
No script	Polyfill	No fallback
A static `.alert` needs no script. Without `alert.js` a dismissible alert stays.	`command` / `commandfor` when that API is missing. `pe-alert` is still required to remove the node.	No native dismiss for an inline alert.