Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
Bootstrap v4.6.0 was released
https://github.com/twbs/bootstrap/releases/tag/v4.6.0
- Tooltips and popovers can have custom clases via customClass option.
- Added new
.navbar-nav-scroll
class for scrolling expanded navbar contents on mobile devices.- For improved accessibiliy, spinners now slow down when
prefers-reduced-motion
is enabled.- v4.x docs are now built on Hugo for easier maintenance and backports from v5.x.
- Darkened background-color of
.dropdown-item
for improved hover state contrast, and ligthened the disabled.dropdown-item
color.- Improved alignment of form validation tooltips.
- File inputs no longer extend beyond their containers.
Add two new variables for pagination border-radius values; backport of #32423
Proposed resolution
Update the Bootstrap library to 4.6.0 and regenerate Vartheme BS4 and VARTHEME_BS4_SUBTHEME
Steps on how to update custom sub-themes
Step #1: Change dependencies in your VARTHEME_BS4_SUBTHEME/package.json
"dependencies": { "bootstrap": "^4.6.0", "jquery": "^3.5.1", "popper.js": "^1.16.1", "rfs": "^9.0.3" },
Step #2: Update your packages
cd YOUR_PROJECT_PATH/docroot/themes/custom/VARTHEME_BS4_SUBTHEME sudo rm -rf yarn.lock node_modules/ yarn install
Step #3: Add the following new Bootstrap 4.6.0 variables in your VARTHEME_BS4_SUBTHEME/scss/bootstrap-variables.scss
$navbar-nav-scroll-max-height: 75vh !default;
$pagination-border-radius-sm: $border-radius-sm !default; $pagination-border-radius-lg: $border-radius-lg !default;
To match with https://github.com/twbs/bootstrap/blob/v4.6.0/scss/_variables.scss
https://git.drupalcode.org/project/vartheme_bs4/-/raw/dbe8a2706b8e166faa...
Step 4: Run Gulp to copy needed files
gulp
This step is important to copy new changes in Bootstrap 4.6.0 JavaScript files
You may see the following in your end.[16:53:45] Starting 'default'... [16:53:45] Starting 'compile'... [16:53:48] Finished 'compile' after 3.25 s [16:53:48] Starting 'move_bootstrap_js_files'... [16:53:48] Finished 'move_bootstrap_js_files' after 26 ms [16:53:48] Starting 'move_popper_js_files'... [16:53:48] Finished 'move_popper_js_files' after 9.29 ms [16:53:48] Starting 'copy_files'... [16:53:48] Finished 'copy_files' after 7.54 ms [16:53:48] Starting 'rename_files'... [16:53:48] Finished 'rename_files' after 3.71 ms [16:53:48] Starting 'clean_files'... [16:53:48] Finished 'clean_files' after 2.66 ms [16:53:48] Starting 'watch'...
Remaining tasks
- Update
- Regenerate
- Test
- Release
User interface changes
None
API changes
None
Data model changes
None
Comment | File | Size | Author |
---|---|---|---|
#2 | bootstrap40600.png | 105.07 KB | Rajab Natshah |
Comments
Comment #2
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #4
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #5
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #6
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #7
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #8
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #9
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #10
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #12
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #13
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commentedComment #14
Rajab Natshah CreditAttribution: Rajab Natshah at Vardot for Vardot commented