Skip to content

Prepare this repository for Bootstrap v6 - #997

Draft
julien-deramond wants to merge 1 commit into
mainfrom
v6-dev
Draft

Prepare this repository for Bootstrap v6#997
julien-deramond wants to merge 1 commit into
mainfrom
v6-dev

Conversation

@julien-deramond

@julien-deramond julien-deramond commented Sep 1, 2026

Copy link
Copy Markdown
Member

Summary

Sets up the v6-dev branch per #996, so this repo tracks Bootstrap's v6-dev branch the same way it tracks the stable release on main.

  • All 9 examples now depend on bootstrap via github:twbs/bootstrap#v6-dev (v6 alpha isn't on npm/CDN yet) and swap @popperjs/core for @floating-ui/dom.
  • Sass moved from @import to @use, with variable overrides ported to v6's config/theme token system.
  • Removed the Sass deprecation-silencing workarounds each example carried under v5 (silenceDeprecations in webpack.config.js/vite.config.js, and parcel/.sassrc.js) — those existed only to hide warnings from v5's legacy @import-based Sass, which v6's @use-based Sass doesn't trigger. Verified npm run build is warning-free in every example after removing them.
  • Markup and classes updated per Bootstrap's official v5-to-v6 migration guide: offcanvasdrawer, dropdownmenu (including visible copy, not just classes), button/text/background utility renames, fs-1..6 → t-shirt sizes, and the navbar's collapse toggle now opens a drawer.
  • Fixed a dark-mode bug the migration surfaced: the old --body-color/--body-bg override doesn't exist as a real v6 token (it's --fg-body/--bg-body, generated from $theme-fgs/$theme-bgs), so it was a silent no-op — on a system with a dark OS preference, examples rendered with dark-mode text over a light background. Fixed by using the real token names and pinning data-bs-theme="light" where the example intends one fixed light look; color-modes instead drops the override entirely since it needs --bg-body/--fg-body to keep following its own picker.
  • Docs links point at the v6-dev Netlify preview (v6-dev--twbs-bootstrap.netlify.app) instead of getbootstrap.com/docs/5.3.
  • READMEs (including root) call out that this branch previews an alpha and link back to the Bootstrap 5 version on main.

react-nextjs is removed from this branch (still present on main). It depends on React Bootstrap, which has no Bootstrap v6-compatible release yet — its 3.0.0-beta line still targets Bootstrap 5 markup — and since its components render their own DOM, pairing it with v6's CSS breaks styling entirely (verified: Offcanvas/Dropdown rendered completely unstyled). Rather than ship a broken example or leave a Bootstrap-5-only outlier sitting in an otherwise-v6 branch, it's removed here until either React Bootstrap ships v6 support, or it's rewritten to use plain Bootstrap markup instead (like every other example in this repo already does), dropping the React Bootstrap dependency.

Test plan

  • npm install && npm test/npm run build passes with zero warnings (Sass or otherwise) in each example
  • Manually exercised drawer/menu/popover interactions and color-mode switching in a browser for each
  • Verified the dark-mode fix by forcing the browser into a dark OS color scheme and re-checking every example
  • Maintainer review of the v6 class/markup choices (several, like the theme-color override shape and bg-2 in place of bg-light, are judgment calls made without an official migration example to copy)
  • Decide react-nextjs's path forward (wait on React Bootstrap vs. rewrite without it)

🤖 Generated with Claude Code

@julien-deramond julien-deramond self-assigned this Sep 1, 2026
@julien-deramond
julien-deramond force-pushed the v6-dev branch 5 times, most recently from ee9cc40 to 475057c Compare September 1, 2026 10:15
Migrate all examples except react-nextjs (blocked on React Bootstrap
v6 support) to Bootstrap v6:

- Point the bootstrap dependency at github:twbs/bootstrap#v6-dev
  (v6 alpha isn't published to npm/CDN yet) and swap
  @popperjs/core for @floating-ui/dom
- Convert Sass from @import to @use, updating partial paths and
  variable overrides to v6's config/theme token system
- Update markup and classes per Bootstrap's v5-to-v6 migration guide:
  offcanvas -> drawer, dropdown -> menu, btn-primary/secondary ->
  btn-solid/btn-outline + theme-*, text-* -> fg-*, fs-1..6 ->
  t-shirt sizes, bg-light/bg-dark -> the neutral bg-* scale,
  navbar-dark -> data-bs-theme, and the navbar's collapse toggle ->
  drawer
- Point docs links at the v6-dev Netlify preview
  (v6-dev--twbs-bootstrap.netlify.app) instead of getbootstrap.com/docs/5.3
- Update READMEs (including root) with a v6-dev preview notice and
  branch-aware links

react-nextjs keeps Bootstrap 5 and react-bootstrap@2 since
react-bootstrap has no Bootstrap v6-compatible release yet and its
components render their own v5 markup; its README documents this.

Refs #996

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@julien-deramond

Copy link
Copy Markdown
Member Author

This PR is not to be merged as it will live as v6-dev until we release Bootstrap v6 alpha but @mdo, could you please check the content, rendering, and DOM modifications in this PR so that we agree this v6-dev branch can be at some point the main branch. 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant