# Bootstrap 6 Alert
> Bootstrap alerts give contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
## Default alert
Bootstrap alerts can accommodate text of any length and feature an optional close button. `.alert` on its own is a neutral alert — a bordered surface that inherits the text color of its surroundings. For inline dismissal, utilize the [alerts JavaScript plugin](#dismissing).
```html
A simple alert—check it out!
```
## Variants
The color comes from a [`.theme-*` class](https://coreui.io/bootstrap/docs/customize/components/#theme-variants), which may sit on the alert or on any element above it.
```html
Here's a straightforward example of a primary alert—take a look!
Here's a straightforward example of a secondary alert—take a look!
Here's a straightforward example of a success alert—take a look!
Here's a straightforward example of a danger alert—take a look!
Here's a straightforward example of a warning alert—take a look!
Here's a straightforward example of an info alert—take a look!
```
> ##### Conveying meaning to assistive technologies
>
> Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It's essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the `.visually-hidden` class.
## Solid
_Added in 6.0.0._
Add `.alert-solid` for a high-contrast alert. The background takes the theme color and the text takes the color that reads on it, so a yellow alert gets dark text and a dark one gets light text without you picking either.
## Live example
Click the button below to show an alert (initially hidden with inline styles), then dismiss (and destroy) it using the built-in close button.
```html
```
The JavaScript below initiates our live alert demo:
```js
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`
`,
`
${message}
`,
' ',
'
'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('Nice, you triggered this alert message!', 'success')
})
}
```
## Link color
Utilize the `.alert-link` utility class to instantly create matching colored links within any alert.
```html
Here's a straightforward example of a primary alert with an example link. Take a look!
Here's a straightforward example of a secondary alert with an example link. Take a look!
Here's a straightforward example of a success alert with an example link. Take a look!
Here's a straightforward example of a danger alert with an example link. Take a look!
Here's a straightforward example of a warning alert with an example link. Take a look!
Here's a straightforward example of an info alert with an example link. Take a look!
```
## Additional content
Bootstrap alerts can also include additional HTML elements such as headings, paragraphs, and dividers. The alert lays its children out in a row, so wrap them in a [`.vstack`](https://coreui.io/bootstrap/docs/helpers/stacks/) to keep them stacked.
```html
Great job!
Awesome! You've successfully read this crucial alert message. This example text will be slightly longer to demonstrate how spacing in an alert interacts with this type of content.
Whenever necessary, make sure to use margin utilities to keep everything organized and neat.
```
## Icons
Put an icon straight into the alert — it lays its children out in a row and spaces them with `--cui-alert-gap`, so no flexbox utilities are needed. Use [CoreUI Icons](https://coreui.io/icons/) or any inline SVG.
```html
An example alert with an icon
```
Different kinds of alert usually call for different icons. Put the matching SVG straight into each one. To reuse a single icon many times across a page, define it once as a symbol — see [Icons](https://coreui.io/bootstrap/docs/icons/).
```html
A straightforward alert with an icon
A straightforward success alert with an icon
A straightforward warning alert with an icon
A straightforward danger alert with an icon
```
## Dismissing
Using the JavaScript plugin, you can remove any alert.
- Ensure that you've loaded the Bootstrap alert plugin or the compiled CoreUI JavaScript.
- Add a [close button](https://coreui.io/bootstrap/docs/components/close-button/) as a child of the alert. It is pushed to the end of the alert on its own — the `.alert-dismissible` class is no longer required.
- `.alert-dismissible` no longer carries any styling. Markup that still has it renders the same, so there is nothing to remove, but the close button has to be a direct child of the alert to be pushed to its end — a button nested in a wrapper is laid out by that wrapper.
- On the close button, include the `data-coreui-dismiss="alert"` attribute, which triggers the JavaScript functionality. You must use the `