Problem/Motivation

Drupal ~11.3 core ships jQuery 4. The bundled Bootstrap 4 JavaScript in js/bootstrap/bootstrap.min.js has a version gate that rejects jQuery 4 and throws: Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0. When it throws, the front end breaks: sticky header, scroll classes, dropdowns, collapse/navbar toggler, modal, carousel.

Steps to reproduce

Install the theme as default on Drupal ~11.3 and open any front-end page; the browser console shows the jQuery version error and Bootstrap behaviours do not run.

Proposed resolution

Patch the bundled Bootstrap JS jQuery gate from t[0]>=4 to t[0]>=5 so Bootstrap 4.6 runs on core jQuery 4. Same approach used by the bootstrap4 theme (3.0.7) and the bootstrap theme (8.x-3.35). Add a js/bootstrap/README.md documenting the fix and how custom themes and modules should migrate jQuery 3 code to jQuery 4.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review by maintainers
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes
  • ✅ Release varbase-9.2.0, vartheme_bs4-9.2.0

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • fix: #3607041 Bootstrap JavaScript jQuery 4 compatibility on Drupal ~11

Read more

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Issue summary: View changes

  • rajab natshah committed 11eaf12f on 9.2.x
    fix: #3607041 Bootstrap JavaScript jQuery 4 compatibility on Drupal ~11....
rajab natshah’s picture

Status: Active » Needs review
rajab natshah’s picture

Assigned: rajab natshah » Unassigned
Issue summary: View changes
Status: Needs review » Fixed
Issue tags: +varbase-9.2.0, +vartheme_bs4-9.2.0

✅ Released vartheme_bs4-9.2.0

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue summary: View changes

✅ Released varbase-9.2.0

rajab natshah’s picture

Version: 9.2.x-dev » 9.0.x-dev

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.