2014-07-12 07:34:47 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2014-07-12 07:34:47 +02:00
title: Alerts
2016-10-03 03:19:47 +02:00
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
2015-08-06 02:47:45 +02:00
group: components
2017-05-28 08:01:14 +02:00
toc: true
2014-07-12 07:34:47 +02:00
---
2015-04-18 04:51:15 +02:00
## Examples
2015-04-17 01:56:40 +02:00
2019-10-22 04:27:43 +02:00
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success` ). For inline dismissal, use the [alerts JavaScript plugin ](#dismissing ).
2014-07-12 07:34:47 +02:00
2019-01-08 17:33:28 +01:00
{{< example > }}
{{< alerts.inline > }}
{{- range (index $.Site.Data "theme-colors") }}
< div class = "alert alert-{{ .name }}" role = "alert" >
A simple {{ .name }} alert—check it out!
< / div > {{- end -}}
{{< / alerts.inline > }}
{{< / example > }}
2014-07-12 07:34:47 +02:00
2020-10-13 15:37:21 +02:00
{{< callout info > }}
2019-01-08 17:33:28 +01:00
{{< partial " callout-warning-color-assistive-technologies . md " > }}
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2016-02-17 11:22:48 +01:00
2021-06-29 17:46:25 +02:00
### Live example
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
2021-08-30 15:00:16 +02:00
{{< example > }}
2021-06-29 17:46:25 +02:00
< div id = "liveAlertPlaceholder" > < / div >
< button type = "button" class = "btn btn-primary" id = "liveAlertBtn" > Show live alert< / button >
2021-08-30 15:00:16 +02:00
{{< / example > }}
2021-06-29 17:46:25 +02:00
We use the following JavaScript to trigger our live alert demo:
```js
2022-04-26 18:38:41 +02:00
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
2021-06-29 17:46:25 +02:00
2022-04-26 18:38:41 +02:00
const alert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">` ,
` <div>${message}</div>` ,
' < button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" > < / button > ',
'< / div > '
].join('')
2021-06-29 17:46:25 +02:00
alertPlaceholder.append(wrapper)
}
2022-04-26 18:38:41 +02:00
const alertTrigger = document.getElementById('liveAlertBtn')
2021-06-29 17:46:25 +02:00
if (alertTrigger) {
2022-04-26 18:38:41 +02:00
alertTrigger.addEventListener('click', () => {
2021-06-29 17:46:25 +02:00
alert('Nice, you triggered this alert message!', 'success')
})
}
```
2014-07-12 07:34:47 +02:00
### Link color
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
2019-01-08 17:33:28 +01:00
{{< example > }}
{{< alerts.inline > }}
{{- range (index $.Site.Data "theme-colors") }}
< div class = "alert alert-{{ .name }}" role = "alert" >
A simple {{ .name }} alert with < a href = "#" class = "alert-link" > an example link< / a > . Give it a click if you like.
< / div > {{ end -}}
{{< / alerts.inline > }}
{{< / example > }}
2015-03-31 05:50:34 +02:00
2016-02-04 05:43:12 +01:00
### Additional content
2017-01-16 06:33:32 +01:00
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
2016-02-04 05:43:12 +01:00
2019-01-08 17:33:28 +01:00
{{< example > }}
2016-02-04 05:43:12 +01:00
< div class = "alert alert-success" role = "alert" >
< h4 class = "alert-heading" > Well done!< / h4 >
< 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.< / p >
2017-01-16 06:33:32 +01:00
< hr >
2016-09-09 07:16:28 +02:00
< p class = "mb-0" > Whenever you need to, be sure to use margin utilities to keep things nice and tidy.< / p >
2016-02-04 05:43:12 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2016-02-04 05:43:12 +01:00
2021-04-25 05:59:13 +02:00
### Icons
2021-05-05 16:44:43 +02:00
Similarly, you can use [flexbox utilities ]({{< docsref "/utilities/flex" >}} ) and [Bootstrap Icons ]({{< param icons >}} ) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
2021-04-25 05:59:13 +02:00
{{< example > }}
< div class = "alert alert-primary d-flex align-items-center" role = "alert" >
2022-05-24 19:39:57 +02:00
< svg xmlns = "http://www.w3.org/2000/svg" class = "bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox = "0 0 16 16" role = "img" aria-label = "Warning:" >
2021-04-25 05:59:13 +02:00
< path d = "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" / >
< / svg >
< div >
An example alert with an icon
< / div >
< / div >
{{< / example > }}
Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
{{< example > }}
< svg xmlns = "http://www.w3.org/2000/svg" style = "display: none;" >
2022-05-24 19:39:57 +02:00
< symbol id = "check-circle-fill" viewBox = "0 0 16 16" >
2021-04-25 05:59:13 +02:00
< path d = "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" / >
< / symbol >
2022-05-24 19:39:57 +02:00
< symbol id = "info-fill" viewBox = "0 0 16 16" >
2021-04-25 05:59:13 +02:00
< path d = "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" / >
< / symbol >
2022-05-24 19:39:57 +02:00
< symbol id = "exclamation-triangle-fill" viewBox = "0 0 16 16" >
2021-04-25 05:59:13 +02:00
< path d = "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" / >
< / symbol >
< / svg >
< div class = "alert alert-primary d-flex align-items-center" role = "alert" >
2022-05-24 19:39:57 +02:00
< svg class = "bi flex-shrink-0 me-2" role = "img" aria-label = "Info:" > < use xlink:href = "#info-fill" / > < / svg >
2021-04-25 05:59:13 +02:00
< div >
An example alert with an icon
< / div >
< / div >
< div class = "alert alert-success d-flex align-items-center" role = "alert" >
2022-05-24 19:39:57 +02:00
< svg class = "bi flex-shrink-0 me-2" role = "img" aria-label = "Success:" > < use xlink:href = "#check-circle-fill" / > < / svg >
2021-04-25 05:59:13 +02:00
< div >
An example success alert with an icon
< / div >
< / div >
< div class = "alert alert-warning d-flex align-items-center" role = "alert" >
2022-05-24 19:39:57 +02:00
< svg class = "bi flex-shrink-0 me-2" role = "img" aria-label = "Warning:" > < use xlink:href = "#exclamation-triangle-fill" / > < / svg >
2021-04-25 05:59:13 +02:00
< div >
An example warning alert with an icon
< / div >
< / div >
< div class = "alert alert-danger d-flex align-items-center" role = "alert" >
2022-05-24 19:39:57 +02:00
< svg class = "bi flex-shrink-0 me-2" role = "img" aria-label = "Danger:" > < use xlink:href = "#exclamation-triangle-fill" / > < / svg >
2021-04-25 05:59:13 +02:00
< div >
An example danger alert with an icon
< / div >
< / div >
{{< / example > }}
2015-04-18 04:51:15 +02:00
### Dismissing
2015-03-31 05:50:34 +02:00
2015-04-18 04:51:15 +02:00
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
2019-10-22 04:27:43 +02:00
- Add a [close button ]({{< docsref "/components/close-button" >}} ) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
2020-07-22 21:33:11 +02:00
- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
2016-10-28 00:13:17 +02:00
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
2015-04-18 04:51:15 +02:00
You can see this in action with a live demo:
2015-03-31 05:50:34 +02:00
2019-01-08 17:33:28 +01:00
{{< example > }}
2016-10-28 00:13:17 +02:00
< div class = "alert alert-warning alert-dismissible fade show" role = "alert" >
2017-08-25 03:11:36 +02:00
< strong > Holy guacamole!< / strong > You should check in on some of those fields below.
2020-07-22 21:33:11 +02:00
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" > < / button >
2015-03-31 05:50:34 +02:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2015-03-31 05:50:34 +02:00
2020-10-13 15:37:21 +02:00
{{< callout warning > }}
2020-07-31 11:31:09 +02:00
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2020-07-31 11:31:09 +02:00
2021-12-17 06:16:24 +01:00
## CSS
2021-02-11 04:29:59 +01:00
### Variables
2022-03-12 06:27:58 +01:00
{{< added-in " 5 . 2 . 0 " > }}
2021-12-17 06:16:24 +01:00
2021-12-21 08:09:43 +01:00
As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
2021-12-17 06:16:24 +01:00
{{< scss-docs name = "alert-css-vars" file = "scss/_alert.scss" > }}
### Sass variables
2021-02-11 04:29:59 +01:00
{{< scss-docs name = "alert-variables" file = "scss/_variables.scss" > }}
2021-12-17 06:16:24 +01:00
### Sass mixin
2021-02-11 04:29:59 +01:00
Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
{{< scss-docs name = "alert-variant-mixin" file = "scss/mixins/_alert.scss" > }}
2021-12-17 06:16:24 +01:00
### Sass loop
2021-02-11 04:29:59 +01:00
Loop that generates the modifier classes with the `alert-variant()` mixin.
{{< scss-docs name = "alert-modifiers" file = "scss/_alert.scss" > }}
2015-04-18 04:51:15 +02:00
## JavaScript behavior
2015-03-31 05:50:34 +02:00
2021-06-28 15:34:47 +02:00
### Initialize
2015-03-31 05:50:34 +02:00
2021-06-28 15:34:47 +02:00
Initialize elements as alerts
2015-03-31 05:50:34 +02:00
2020-10-19 11:56:49 +02:00
```js
2022-04-26 18:38:41 +02:00
const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))
2020-10-19 11:56:49 +02:00
```
2021-07-30 07:56:36 +02:00
2021-06-28 15:34:47 +02:00
{{< callout info > }}
For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"` , the component will be initialized automatically and properly dismissed.
2015-03-31 05:50:34 +02:00
2021-06-28 15:34:47 +02:00
See the [triggers ](#triggers ) section for more details.
{{< / callout > }}
### Triggers
2021-07-28 16:39:32 +02:00
{{% js-dismiss "alert" %}}
2018-08-24 11:46:05 +02:00
2021-06-28 15:34:47 +02:00
**Note that closing an alert will remove it from the DOM.**
### Methods
2018-08-24 11:46:05 +02:00
2022-03-14 08:38:04 +01:00
You can create an alert instance with the alert constructor, for example:
```js
2022-04-26 18:38:41 +02:00
const bsAlert = new bootstrap.Alert('#myAlert')
2022-03-14 08:38:04 +01:00
```
This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’ s auto-initialization.)
{{< bs-table > }}
| Method | Description |
| --- | --- |
| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)` . |
2022-03-31 17:45:25 +02:00
| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Alert.getOrCreateInstance(element)` . |
2022-03-14 08:38:04 +01:00
{{< / bs-table > }}
Basic usage:
2015-03-31 05:50:34 +02:00
2020-10-19 11:56:49 +02:00
```js
2022-04-26 18:38:41 +02:00
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
2018-08-24 11:46:05 +02:00
alert.close()
2020-10-19 11:56:49 +02:00
```
2015-03-31 05:50:34 +02:00
### Events
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
2022-03-14 08:38:04 +01:00
{{< bs-table > }}
| Event | Description |
| --- | --- |
| `close.bs.alert` | Fires immediately when the `close` instance method is called. |
| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. |
{{< / bs-table > }}
2015-03-31 05:50:34 +02:00
2020-10-19 11:56:49 +02:00
```js
2022-04-26 18:38:41 +02:00
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
2020-09-28 14:01:25 +02:00
// do something, for instance, explicitly move focus to the most appropriate element,
2020-07-31 11:31:09 +02:00
// so it doesn't get lost/reset to the start of the page
2020-09-28 14:01:25 +02:00
// document.getElementById('...').focus()
2015-03-31 05:50:34 +02:00
})
2020-10-19 11:56:49 +02:00
```