Skip to content

Drop deprecated .alert-dismissible remaining usage #42520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
julien-deramond wants to merge 1 commit into
base: v6-dev
Choose a base branch
from
Open

Drop deprecated .alert-dismissible remaining usage #42520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 26 additions & 22 deletions js/tests/visual/alert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,40 @@
<div class="container">
<h1>Alert <small>Bootstrap Visual Test</small></h1>

<div class="alert theme-warning alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="alert theme-warning fade show" role="alert">
<p><strong>Holy guacamole!</strong> You should check in on some of those fields below.</p>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert theme-danger alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</p>
<p>
<button type="button" class="btn-solid theme-danger">Danger</button>
<button type="button" class="btn-solid theme-secondary">Secondary</button>
</p>
<div class="alert theme-danger fade show" role="alert">
<div>
<p>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</p>
<p>
<button type="button" class="btn-solid theme-danger">Danger</button>
<button type="button" class="btn-solid theme-secondary">Secondary</button>
</p>
</div>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert theme-danger alert-dismissible fade show" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p>
<button type="button" class="btn-solid theme-danger">Take this action</button>
<button type="button" class="btn-solid theme-primary">Or do this</button>
</p>
<div class="alert theme-danger fade show" role="alert">
<div>
<p>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
</p>
<p>
<button type="button" class="btn-solid theme-danger">Take this action</button>
<button type="button" class="btn-solid theme-primary">Or do this</button>
</p>
</div>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert theme-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="alert theme-warning fade show" role="alert" style="transition-duration: 5s;">

@julien-deramond julien-deramond Jun 16, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not related to this PR, but this doesn't work anymore compared to v5 @mdo. I can create an issue to track it.

<p>This alert will take 5 seconds to fade out.</p>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions site/src/assets/examples/cheatsheet/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,9 +644,9 @@ export const body_class = 'bg-body-tertiary'

<div>
<Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
<div class="alert theme-${themeColor.name} alert-dismissible fade show mb-3" role="alert">
<div class="alert theme-${themeColor.name} fade show mb-3" role="alert">
<p>A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`)} />

Expand Down
4 changes: 2 additions & 2 deletions site/src/assets/partials/snippets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,9 @@ export default () => {
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert theme-${type} alert-dismissible" role="alert">`,
`<div class="alert theme-${type}" role="alert">`,
` <p>${message}</p>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
' <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')

Expand Down
4 changes: 2 additions & 2 deletions site/src/content/docs/components/alert.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@ Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Boo
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.
- 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.
- Add a [close button]([[docsref:/components/close-button]]) and use flexbox utilities (e.g. `ms-auto`) to position it within the alert.
- 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.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.

You can see this in action with a live demo:

<Example code={`<div class="alert theme-warning alert-dismissible fade show" role="alert">
<Example code={`<div class="alert theme-warning fade show" role="alert">
<p>Something’s wrong, check the fields below and try again.</p>
<CloseButton dismiss="alert" class="ms-auto" />
</div>`} />
Expand Down
1 change: 1 addition & 0 deletions site/src/content/docs/guides/migration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
- Open state styling uses `details[open]` instead of JavaScript-toggled classes.
- Theme coloring via `.theme-*` classes on the `.accordion` wrapper.
- **Rebuilt close button markup.** `.btn-close` now renders its icon via a CSS `mask-image` (`--btn-close-icon`) tinted with `background-color: currentcolor`, so the button is self-contained—no child `<svg>` is required. The filter-based dark mode approach (`$btn-close-white-filter`) has been replaced by `currentcolor` inheritance, and the `.btn-close-white` class has been removed—on dark backgrounds (e.g., `.text-bg-dark`) the icon now inherits the contrast color automatically.
- **Removed `.alert-dismissible`.** Dismissible alerts no longer require the `.alert-dismissible` modifier class. Place a `.btn-close` directly inside the alert—the alert's flex layout positions it automatically. Remove any `.alert-dismissible` class from your markup.
- **Restructured cards.** Borders now live on `.card-body` and `.card-list` segments rather than a single outer `.card` border. Added `--card-box-shadow` and `--card-body-gap` tokens. New variant classes: `.card-translucent` (frosted glass effect) and `.card-subtle` (themed with subtle backgrounds). Horizontal cards use a new `.card-row` class.
- **Reworked badge variants.** Badge color variants now use `.badge-subtle` and `.badge-outline` combined with `.theme-*` classes (e.g., `.badge-subtle .theme-primary`), replacing the v5 `.bg-primary` utility pattern on badges.
- **Updated breadcrumb markup.** Breadcrumbs now use `.breadcrumb-link` as an interactive element with padding, min-height, and hover background, and explicit `.breadcrumb-divider` elements as separators between items. An empty `.breadcrumb-divider` renders a default chevron via a CSS `mask-image` (`--breadcrumb-divider-icon`) tinted with `background-color: currentcolor`; add your own SVG, text, or markup inside it to override. This replaces the v5 `--bs-breadcrumb-divider` content string on the `.breadcrumb-item::before` pseudo-element.
Expand Down