Data attributes API rename in Bootstrap 5 and legacy markup compatibility

In a Bootstrap 5 codebase the only safe way to keep legacy data-toggle markup is to treat it as frozen technical debt: allow it only on pages that cannot be edited (e.g., generated CMS output or legacy sites) and set a clear cutoff date or release after which the attributes are considered broken and will fail CI. This boundary avoids contaminating new markup while giving teams time to migrate.

Manual markup updates vs custom shim

• Manual updates are preferred when the number of legacy elements is small, they are static, owned by the same development team, and can be edited directly.
• Custom shim is justified for large volumes of generated or CMS‑driven markup that must continue to work during a phased migration, or when editing the source is impossible.

Components affected first by the rename

• Dropdowns
• Modals
• Collapses
• Tabs and off‑canvas
• Alerts

Popper v2 requirement

The data-bs- attribute change introduces Popper v2 for tooltips, popovers and dropdowns, so placement, offset, flip and boundary behavior must be verified after migration.

Steps to verify compatibility

1. Identify all data-toggle elements on the site (e.g., using a search or build script).
2. Confirm the Bootstrap version in use and whether the page loads the bundled build (which includes Popper v2) or a custom build.
3. For each element, replace data-toggle with the corresponding data-bs- attribute (e.g., data-toggle="Dropdown" → data-bs-toggle="Dropdown").
4. Run the component tests (modal, collapse, dropdown, tab/off‑canvas, alert) on the converted markup.
5. If a shim is chosen, ensure it runs before Bootstrap’s data‑api initialization and maps attributes without creating duplicate initializations.
6. Test Popper‑driven components (tooltip, popover, dropdown) for correct positioning, flip, offset and boundary handling.