Alters
Example
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Live example
Nice, you triggered this alert message!
Js :
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
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('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
alert('Nice, you triggered this alert message!', 'success')
})
}Link color
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
Additional content
Well done!
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.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissing
Holy guacamole! You should check in on some of those fields below.
JavaScript behavior
Initialize
Initialize elements as alerts
const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))Triggers
Note that closing an alert will remove it from the DOM.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button><button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>Methods
You can create an alert instance with the alert constructor, for example:
const bsAlert = new bootstrap.Alert('#myAlert')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.)
| 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). |
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). |
Basic usage:
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()Events
Bootstrap’s alert plugin exposes a few events for hooking into alert functionality.
| 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. |
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
// do something, for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('...').focus()
})