Alert · Bootstrap v6.0

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied. For inline dismissal, use the alerts JavaScript plugin.
A simple alert—check it out!
Use any of our variant theme classes for color mode adaptive, contextual styling.
A simple primary alert—check it out!
A simple accent 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 inverse alert—check it out!
A simple secondary alert—check it out!
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
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.
We use the following JavaScript to trigger our live alert demo:
Use the .alert-link utility class to quickly provide matching colored links within any alert.
A simple primary alert with an example link. Give it a click if you like.
A simple accent 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 inverse 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.
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
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.
Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
An example alert with an icon
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:
An alert fades out before it is removed. The plugin adds .hiding for the length of the transition, so no extra classes are needed in your markup. Add .alert-instant to remove the alert at once instead. See Transitions for the tokens that tune the fade.
You can see this in action with a live demo:
Something’s wrong, check the fields below and try again.
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.
Alerts use local CSS variables on .alert for real-time customization. Values for the CSS variables are generated from Sass maps unique to each component and applied to the aforementioned class.
Loop that generates the modifier classes with an overriding of CSS variables.
Initialize elements as alerts
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.
See the triggers section for more details.
Dismissal can be achieved with the data-bs-dismiss attribute on a button within the alert as demonstrated below: