Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts accept any length of text and can include an optional close button. Use alert-type to select one of Bootstrap's contextual variants, and use <bs-close-button> when the alert should be dismissible.

Do not rely on color alone to communicate meaning. Make the status clear in the alert text or include additional visually hidden text when the visible message needs it.

aspnet 

<bs-div display="Flex" flex-direction="Column" gap="Default2">
    <bs-alert alert-type="Primary">A simple primary alert—check it out!</bs-alert>
    <bs-alert alert-type="Secondary">A simple secondary alert—check it out!</bs-alert>
    <bs-alert alert-type="Success">A simple success alert—check it out!</bs-alert>
    <bs-alert alert-type="Danger">A simple danger alert—check it out!</bs-alert>
    <bs-alert alert-type="Warning">A simple warning alert—check it out!</bs-alert>
    <bs-alert alert-type="Info">A simple info alert—check it out!</bs-alert>
    <bs-alert alert-type="Light">A simple light alert—check it out!</bs-alert>
    <bs-alert alert-type="Dark">A simple dark alert—check it out!</bs-alert>
</bs-div>

Live example

Click the button below to show a helper-rendered alert, then dismiss it with the built-in close button.

aspnet 

<bs-button btn-style="Primary" onclick="document.getElementById('liveDocsAlert').classList.remove('d-none')">Show live alert</bs-button>
<bs-alert id="liveDocsAlert" alert-type="Success" display="None" top-margin="Default3">
    Nice, you triggered this alert message!
    <bs-close-button />
</bs-alert>

Link color

Use <bs-anchor> inside an alert when links should inherit the matching alert link styling from the parent alert.

aspnet 

<bs-alert alert-type="Primary">
    A simple primary alert with <bs-anchor href="#">an example link</bs-anchor>. Give it a click if you like.
</bs-alert>
<bs-alert alert-type="Secondary">
    A simple secondary alert with <bs-anchor href="#">an example link</bs-anchor>.
</bs-alert>

Additional content

Alerts can contain additional helper-rendered content such as headings, paragraphs, dividers, and spacing utilities.

aspnet 

<bs-alert alert-type="Success">
    <bs-heading heading-level="Four">Well done!</bs-heading>
    <bs-p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</bs-p>
    <hr />
    <bs-p bottom-margin="None">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</bs-p>
</bs-alert>

Dismissing

Place <bs-close-button> inside an alert to emit Bootstrap's dismiss trigger and let the alert plugin remove the alert after dismissal.

aspnet 

<bs-alert alert-type="Warning">
    A simple warning alert—check it out!
    <bs-close-button />
</bs-alert>
Use <bs-close-button /> inside an alert to make it dismissible. The alert includes alert-dismissible, fade, and show classes automatically when a close button is present.

Icons

Combine <bs-alert>, <bs-icon>, and flex utility attributes when the alert needs a leading icon aligned with the message text.

aspnet 

<bs-alert alert-type="Primary" display="Flex" align-items="Center">
    <bs-icon icon="InfoCircleFill" flex-shrink="Zero" end-margin="Default2" aria-label="Info:" />
    <bs-div> An example alert with an icon </bs-div>
</bs-alert>
<bs-alert alert-type="Success" display="Flex" align-items="Center">
    <bs-icon icon="CheckCircleFill" flex-shrink="Zero" end-margin="Default2" aria-label="Success:" />
    <bs-div> An example success alert with an icon </bs-div>
</bs-alert>
<bs-alert alert-type="Warning" display="Flex" align-items="Center">
    <bs-icon icon="ExclamationTriangleFill" flex-shrink="Zero" end-margin="Default2" aria-label="Warning:" />
    <bs-div> An example warning alert with an icon </bs-div>
</bs-alert>
<bs-alert alert-type="Danger" display="Flex" align-items="Center">
    <bs-icon icon="ExclamationTriangleFill" flex-shrink="Zero" end-margin="Default2" aria-label="Danger:" />
    <bs-div> An example danger alert with an icon </bs-div>
</bs-alert>
Uses <bs-icon /> to render Bootstrap Icons inside alerts. Combine with flex utilities for proper alignment.

Accessibility

Alerts render with alert semantics for important status messages. When a dismissible alert is removed, move focus to an appropriate location if the dismissed close button had keyboard focus.

aspnet 

<bs-alert alert-type="Info">
    Alerts render with <code>role="alert"</code> so assistive technologies announce important status messages.
</bs-alert>

Events

aspnet 

<bs-alert alert-type="Warning"
          on-close="console.log('Alert close', event)"
          on-closed="console.log('Alert closed', event)">
    Dismiss me to see events.
    <bs-close-button />
</bs-alert>
The BCL on-close and on-closed attributes map to close.bs.alert and closed.bs.alert. Direct Bootstrap event listeners still work.

CSS

Variables

Alerts use Bootstrap's local CSS variables for color, background, borders, padding, radius, and link color.

Sass variables

Alert Sass variables remain stylesheet concerns; use alert-type for the documented contextual variants in Razor.

Sass mixins

Bootstrap's alert variant mixin is deprecated in Bootstrap 5.3. The helper follows the generated contextual classes.

Sass loops

Bootstrap generates alert variant classes from the theme color map; the helper exposes those variants through alert-type.

JavaScript behavior

Dismissible alerts use Bootstrap's alert plugin. The close button emits the dismiss trigger, and Bootstrap removes the alert after the transition completes.

Initialize

Use bootstrap.Alert or bootstrap.Alert.getOrCreateInstance(element) when alerts are added dynamically or need imperative control.

Triggers

<bs-close-button /> inside <bs-alert> is captured by the alert helper and rendered as the Bootstrap dismissal trigger.

Methods

  • Use bootstrap.Alert.getOrCreateInstance(element) for dynamically added alerts.
  • Call close() on the instance to dismiss an alert imperatively.
  • Listen for close.bs.alert before dismissal and closed.bs.alert after removal.