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
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
function alert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '< div class = "alert alert-' + type + ' alert-dismissible" role = "alert" > ' + message + '< button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" > < / button > < / div > '
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
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" >
2021-05-08 13:53:03 +02:00
< svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "currentColor" 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;" >
< symbol id = "check-circle-fill" fill = "currentColor" viewBox = "0 0 16 16" >
< 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 >
< symbol id = "info-fill" fill = "currentColor" viewBox = "0 0 16 16" >
< 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 >
< symbol id = "exclamation-triangle-fill" fill = "currentColor" viewBox = "0 0 16 16" >
< 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" >
2021-05-08 13:53:03 +02:00
< svg class = "bi flex-shrink-0 me-2" width = "24" height = "24" 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" >
2021-05-08 13:53:03 +02:00
< svg class = "bi flex-shrink-0 me-2" width = "24" height = "24" 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" >
2021-05-08 13:53:03 +02:00
< svg class = "bi flex-shrink-0 me-2" width = "24" height = "24" 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" >
2021-05-08 13:53:03 +02:00
< svg class = "bi flex-shrink-0 me-2" width = "24" height = "24" 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
2018-08-24 11:46:05 +02:00
var alertList = document.querySelectorAll('.alert')
2021-03-18 11:58:26 +01:00
var alerts = Array.prototype.slice.call(alertList).map(function (element) {
2021-06-28 15:34:47 +02:00
return new bootstrap.Alert(element)
2018-08-24 11:46:05 +02:00
})
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
2019-07-15 18:59:55 +02:00
< table class = "table" >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< thead >
< tr >
< th > Method< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< code > close< / code >
< / td >
< td >
Closes an alert by removing it from the DOM. If the < code > .fade< / code > and < code > .show< / code > classes are present on the element, the alert will fade out before it is removed.
< / td >
< / tr >
< tr >
< td >
< code > dispose< / code >
< / td >
< td >
2020-10-02 13:58:59 +02:00
Destroys an element's alert. (Removes stored data on the DOM element)
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< / td >
< / tr >
< tr >
< td >
2019-07-28 15:24:46 +02:00
< code > getInstance< / code >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< / td >
< td >
2019-07-28 15:24:46 +02:00
Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: < code > bootstrap.Alert.getInstance(alert)< / code >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< / td >
< / tr >
2021-06-03 17:53:27 +02:00
< tr >
< td >
< code > getOrCreateInstance< / code >
< / td >
< td >
2021-09-07 08:45:27 +02:00
Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.
2021-06-03 17:53:27 +02:00
You can use it like this: < code > bootstrap.Alert.getOrCreateInstance(element)< / code >
< / td >
< / tr >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< / tbody >
< / table >
2015-03-31 05:50:34 +02:00
2020-10-19 11:56:49 +02:00
```js
2018-08-24 11:46:05 +02:00
var alertNode = document.querySelector('.alert')
2019-07-28 15:24:46 +02:00
var alert = bootstrap.Alert.getInstance(alertNode)
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.
2019-07-15 18:59:55 +02:00
< table class = "table" >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< thead >
< tr >
< th > Event< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > close.bs.alert< / code > < / td >
< td >
Fires immediately when the < code > close< / code > instance method is called.
< / td >
< / tr >
< tr >
< td > < code > closed.bs.alert< / code > < / td >
< td >
Fired when the alert has been closed and CSS transitions have completed.
< / td >
< / tr >
< / tbody >
< / table >
2015-03-31 05:50:34 +02:00
2020-10-19 11:56:49 +02:00
```js
2018-08-24 11:46:05 +02:00
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
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
```