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

Bootstrap v4.6.0

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

CommentFileSizeAuthor
#2 bootstrap40600.png105.07 KBRajab Natshah
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RajabNatshah created an issue. See original summary.

Rajab Natshah’s picture

Issue summary: View changes
Status: Needs work » Active
FileSize
105.07 KB

  • RajabNatshah committed dbe8a27 on 8.x-6.x
    Issue #3193729: Update Bootstrap library from 4.5.3 to 4.6.0
    
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes

  • RajabNatshah committed e835c73 on 9.0.x
    Issue #3193729: Update Bootstrap library from 4.5.3 to 4.6.0
    
Rajab Natshah’s picture

Assigned: Rajab Natshah » Mohammed J. Razem
Status: Active » Needs review
Issue tags: +varbase-8.8.9, +varbase-9.0.0-rc2, +varbase-9.0.0
Rajab Natshah’s picture

Assigned: Mohammed J. Razem » Unassigned
Rajab Natshah’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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