Update dependency bootstrap to v5
This MR contains the following updates:
Package | Change | Age | Adoption | Passing | Confidence |
---|---|---|---|---|---|
bootstrap (source) | ^4.5.3 -> 5.1.1 |
Release Notes
twbs/bootstrap
v5.1.1
Highlights
🎨 CSS
- #34679: Fix font size variable name
-
#34699: Add check to
rgba-css-var
function for body or bg - #34773: Include root.scss in all dist builds
-
#34779: Fix
$dropdown-link-hover-color
variable color value in _variable.scss file
☕ ️ JavaScript
- #34621: carousel: move common checks to a function
-
#34701: Fix modal when is triggered by
bs-toggle
, to hide other open instances - #34835: Collapse on toggle, should not hide descendant tabpanels
-
#34842: Fix tooltip
data-bs-original-title
issue
📖 Docs
- #32781: docs: shortcodes tweaks and consistency changes
- #34686: docs: Fix placeholders typo
- #34752: Fix typo in placeholder docs
- #34769: Enhance Alerts > Live Example section
- #34781: docs: fix typos in approach and placeholders
- #34787: Progress page: remove toggle animation button
- #34840: clarify importing all vs specific plugins
-
#34842: Fix tooltip
data-bs-original-title
issue -
#34877: docs: add
$enable-smooth-scroll
to Sass options page - #34886: Disabled link cleanup
-
#34892: Fix a11y issues in
.hstack
example and placeholder 'How it works' example - #34910: Docs: Add Callout to Stacks Helper page about limited flexbox gap support
-
#34913: docs: make use of the
.Site.Params.docs_version
variable - #34914: Typo/US locale fixes
🛠 Examples
- #34766: dashboard-rtl: use the same scripts as the dashboard example
🌎 Accessibility
- #34886: Disabled link cleanup
🏭 Tests
- #34077: Add GitHub SHA in BrowserStack build ID.
- #34912: BrowserStack: add Firefox 60 and Chrome 60
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F42
v5.1.0
Highlights
- Added experimental, opt-in CSS Grid support
- Added support for responsive offcanvas components in navbars
- Added new placeholders component for skeleton loading screens
- Added support for horizontal collapsing in the collapse component
- Added new stack and vertical rule helpers
- Added tons of new CSS variables for body styles, colors, RGB colors, and more
- Updated
.bg-*
and.text-*
utilities to use CSS variables and new RGB CSS variables for real-time customization - Added four new component examples for dropdowns, footers, list groups, and modals
- Updated modal and offcanvas backdrops to make them unique to each component
- Reverted ability for
.col-*
classes to override.row-cols-*
classes for now until we can fix some critical bugs
🚀 Features
- #31813: Add optional CSS grid
- #31859: Add a "skeletons" component
- #32319: Add maps for all colors, document how to extend color utilities
-
#33403: modal: change
data-dismiss
so that it can be outside of a modal usingbs-target
- #33781: Add utility classes for opacity
-
#33986: New helpers:
.hstack
,.vstack
, and.vr
- #34253: Add horizontal collapse support
- #34273: Offcanvas navbar
-
#34333: Accept argument of different types in the
getInstance
method
🎨 CSS
- #31813: Add optional CSS grid
- #32319: Add maps for all colors, document how to extend color utilities
- #33781: Add utility classes for opacity
-
#33986: New helpers:
.hstack
,.vstack
, and.vr
- #34100: Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables
- #34253: Add horizontal collapse support
- #34273: Offcanvas navbar
-
#34432: More concise improvements for
add()
andsubtract()
-
#34440: Add null
$card-box-shadow
variable - #34445: fix(forms): prevent color control from shrinking
- #34475: Make text decoration consistent with other anchors
-
#34481: Make the
$accordion-icon-color
default value consistent with the$accordion-button-color
- #34572: Clean up a couple CSS Grid issues
-
#34612: Revert "Allow individual grid classes to override
.row-cols
" -
#34651: Update
$input-bg
to use$body-bg
☕ ️ JavaScript
- #33402: Changes to Alert component to match the others
-
#33403: modal: change
data-dismiss
so that it can be outside of a modal usingbs-target
-
#33603: Fix
Manipulator.offset()
-
#33610: Toasts: Change showing timings and classes to keep toast
display:none
by default - #33865: Add shift-tab keyboard support for dialogs (modal & Offcanvas components)
- #33866: Add dynamic, live alerts example to docs
- #34170: Use a streamlined way to trigger component dismiss
- #34205: Cleanup tooltip & popover components
- #34207: Make proper use of the SelectorEngine in ScrollSpy
-
#34215: Use the
switch
statement instead ofif
- #34220: Do a major cleanup in Collapse.js
-
#34333: Accept argument of different types in the
getInstance
method -
#34441: util.js: remove
Selector.findOne()
dependency - #34458: Dropdown cleanups
-
#34543: Fix
Util.reflow
function and add documentation - #34619: tooltip: move repeated strings to constants
- #34620: Enable a few eslint-config-xo rules
- #34628: Regression on tooltip template creation process.
📖 Docs
- #32319: Add maps for all colors, document how to extend color utilities
- #33866: Add dynamic, live alerts example to docs
- #34100: Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables
- #34406: Fix site params variable on themes section
- #34472: Added new Offcanvas file to import example
- #34517: Update nav-tab.md
- #34526: Add: GitHub Octicons to the list
- #34557: docs: minor image compression improvements
- #34573: Update the custom Sass import docs
-
#34574: Document change to
hr
in v5 -
#34577: Make note of
_root.scss
being required - #34578: Rename Build Tools page to Contribute
- #34605: Collapse page: add a link to the accordion page
-
#34637: Improved docs describing
media-breakpoint-down
breakpoints
🛠 Examples
- #33882: Add four new snippet examples
- #34273: Offcanvas navbar
-
#34336: Remove unneeded
.text-white-50
CSS rule from Offcanvas Example
🌎 Accessibility
- #33865: Add shift-tab keyboard support for dialogs (modal & Offcanvas components)
🔧 Utility API
- #34100: Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables
🧰 Misc
-
#32907: npm scripts: add
aggregate-output
- #34389: CONTRIBUTING.md: fix broken link to README.md
-
#34453: CI: make use of the
actions/setup-node
'scache
option
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F31
v5.0.2
🚀 Features
- #34052: Automatically select an item in the dropdown when using arrow keys
🎨 CSS
-
#33621: Allow individual grid classes to override
.row-cols
- #34008: Fix x-paddings for select (with floating label, and in Firefox)
- #34026: Set the correct color for popover header bottom border
-
#34034: Add missing transition to
.form-select
- #34044: Fix wrong comment text for tooltip
-
#34047: Handle complex expressions in
add()
&subtract()
-
#34048: Decouple
--bs-table-bg
and--bs-table-accent-bg
- #34062: Document how to make utilities responsive using the API
-
#34124: fix(dropdowns): RTL for
.dropdown-menu-*
-
#34161: fix(forms): unitless
line-height
for floating labels -
#34223: docs(style): fix display of nested
<ul><li>
-
#34245: Replace
/
division with multiplication and customdivide()
function - #34255: Don't set auto margin on offcanvas close
- #34281: Fix lingering Sass math
-
#34283: Update the
divide()
function and RFS - #34332: Fix another Sass division
☕ ️ JavaScript
-
#33276: Add
getOrCreateInstance
method in base-component -
#33371: Popover & Tooltip: Allow
dispose
/hide
methods usage throughjQueryIntreface
-
#33608: Utils: add
getNextActiveElement
helper function - #33845: Fix handling of transitionend events dispatched by nested elements
-
#33928: Reset inside a Dialog does not work if
data-dismiss="modal"
is set - #33947: Refactor scrollbar.js to be used as a Class
- #33948: Add tests for scrollbar.js & better handling if a style property doesn't exist
-
#33960: fix
isVisible
false positives from deep nesting or alternate means - #33982: Don't add empty content holder when there is no content available
- #34014: Fix backdrop "Cannot read property 'removeChild' of null" when removed from body
- #34052: Automatically select an item in the dropdown when using arrow keys
- #34070: Fix test of #34014
-
#34071: Change
element.parentNode.removeChild(element)
toelement.remove()
- #34085: Fix prevented show event disables modals with fade class from being displayed again
- #34092: Backdrop: Fix stale body by removing unnecessary default
-
#34158: Register only one
DOMContentLoaded
event listener inonDOMContentLoaded
- #34266: Fix carousel buttons
- #34307: fix(carousel): arrow keys break animation if carousel sliding
📖 Docs
-
#33724: Nav-tabs documentation example: Adjust example to
querySelectorAll
- #33749: add Bootstrap 5 Simplified Chinese translation
-
#34009: Drop
BlinkMacSystemFont
in docs - #34018: Adjusted z-index to cover "copy" buttons
- #34040: Placeholder changes to input value in readonly input.
- #34044: Fix wrong comment text for tooltip
- #34050: Replace Freenode with Libera IRC server
- #34062: Document how to make utilities responsive using the API
- #34074: Update Hugo config and sitemap.xml
- #34090: Change HTTP to HTTPS
- #34143: Add positioned badges example to docs
- #34160: img in horizontal card
- #34175: Fix typo in sass.md ("theses"→ "these")
- #34179: Missed explanations for variables override
- #34180: docs: update dropdowns.md to reflect the correct version
- #34183: docs: update migration.md to fix a typo
- #34199: docs: update overview.md to fix typo
-
#34223: docs(style): fix display of nested
<ul><li>
- #34239: fix(docs): update docs to match the newest modal-open removal
- #34251: Document the change to breakpoint mixins
- #34256: Add important to utilities, mention it's usage and global variable
- #34263: Fix error in JavaScript doc example
-
#34280: Remove a leftover
sass:math
module call
🛠 Examples
- #34007: Dashboard example improvements
-
#34011: Cheatsheet: fix JS errors in
setActiveItem()
- #34214: fix accessibility issue on sidebars example
🌎 Accessibility
- #34052: Automatically select an item in the dropdown when using arrow keys
- #34214: fix accessibility issue on sidebars example
🔧 Utility API
- #34062: Document how to make utilities responsive using the API
- #34256: Add important to utilities, mention it's usage and global variable
🏭 Tests
- #33948: Add tests for scrollbar.js & better handling if a style property doesn't exist
🧰 Misc
- #34075: Improve vnu-jar.js
- #34250: Replace Freenode with Libera.Chat in the remaining files
- #34279: build/vnu-jar.js: clean up ignores
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F41
v5.0.1
🎨 CSS
-
#33551: Modals no longer use
.modal-open
to affect the<body>
scroll -
#33644: Validated inputs in
.input-group
shouldn't be behind sibling element -
#33825: Prevent
accent-bg
from leaking in nested table -
#33870: Don't redefine
$list-group-color
in loop -
#33961: Revert
:read-only
selector back to[readonly]
☕ ️ JavaScript
- #33221: Prevent toast autohiding if focusing or hovering
- #33288: Remove potential false positive assertions
- #33327: Move get element functionality to a helper
-
#33381: Popover/Tooltip: streamline
config
property to start with underscore -
#33609: Merge js-components
transitionend
listener callbacks into one method -
#33635: Extract static
DATA_KEY
&EVENT_KEY
to base-component - #33740: Refactor: move disposing properties into the base class
-
#33853: Fix backdrop
rootElement
not initialized in Modal - #33920: Fix: Click on input outside of dropdown-menu prevents dropdown from closing
- #33938: Fix dropdown test warning "without expectations"
📖 Docs
- #33709: Add Arabic translation
- #33837: update About text now that Bootstrap 5 is live
- #33841: Fix typo in scrollspy docs
- #33842: Fix browser support versions in migration doc
- #33843: Fix typo in migration.md
- #33855: Remove extra t in Close button heading in Migration guide
- #33868: Fix value
- #33879: Fix "no long require" to "no longer require" typo
- #33893: Add accessible names to SVG icons in alerts
- #33896: Fix accordion link
- #33901: docs: make tooltip anchor properly wrap the svg
- #33904: Add Fathom Analytics to v5 docs
- #33915: docs: fix rtlcss stringmap configuration
- #33916: Remove unneeded "Edge Legacy" mention in Range docs
- #33924: Fix "directoinal" typo in v5 migration docs
🛠 Examples
- #33850: Fix unnecessary classes
- #33859: Update Sidebars example to fix dividers and rendering on Chrome
- #33926: Fix offcanvas example, using a custom trigger selector
🌎 Accessibility
- #33893: Add accessible names to SVG icons in alerts
🏭 Tests
- #33288: Remove potential false positive assertions
-
#33635: Extract static
DATA_KEY
&EVENT_KEY
to base-component -
#33927: Fix offcanvas test to expect the initial body
overflow
value - #33938: Fix dropdown test warning "without expectations"
🧰 Misc
- #33923: CI: remove Node.js 10
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F38
v5.0.0
Highlights
#32155: Updated make-col()
mixin to generate equal columns when no size is specified
#32763: Added new color-scheme()
mixin
#33389: Dropdown menus now have option become clickable
#33453: Added new docs footer
#33548: Offcanvas header components are now vertically aligned
#33549: Added offcanvas-top modifier
#33634: Added support for .dropdown-item
s wrapped in <li>
s
#33626: Fix v5 regressions in tab dropdown functionality
🚀 Features
-
#32763: Add
color-scheme
mixin - #33389: Dropdown — Add option to make the dropdown menu clickable
- #33549: Add offcanvas-top modifier
🎨 CSS
- #32155: Add equal column mixin
-
#32763: Add
color-scheme
mixin - #33292: Make accordion icon rotation more natural
- #33411: Fix validation feedback icon in select multiple
-
#33478: Make
.nav-link
color consistent when using buttons - #33482: Dropdown — Apply positioning only when Popper is not used
- #33548: Vertically align offcanvas header components
- #33549: Add offcanvas-top modifier
- #33550: Spinner alignment changes
- #33598: Hide validation icons from multiple selects
- #33600: Have $form-check-input-border's default derive from $black
- #33607: Reduce color-scheme complexity
-
#33642: use
:read-only
css selector instead[readonly]
for consistency - #33658: fix: use list-group variable instead of alert
-
#33736: accordion: fix
border-top
on Firefox
☕ ️ JavaScript
- #32439: Decouple BackDrop from modal
- #33245: Decouple Modal's scrollbar functionality
- #33249: Simplify Modal Config
- #33250: Simplify ScrollSpy config
- #33310: fix: make EventHandler better handle mouseenter/mouseleave events
- #33389: Dropdown — Add option to make the dropdown menu clickable
- #33429: Remove element event listeners through base component
-
#33451: Add missing things in
hide
method of dropdown -
#33456: Use our
isDisabled
util on dropdown - #33466: Refactor dropdown's hide functionality
- #33479: Fix dropdown escape propagation
-
#33496: Use cached
noop
function - #33497: Use template literals instead of concatenation
- #33499: Fix wrong carousel transformation, direction to order
- #33545: Use the backdrop util in offcanvas, enforcing consistency
- #33586: Tab.js: Fixes on click handling
-
#33589: refactor: make static
selectMenuItem
method private - #33612: tests: fix random BrowserStack failures in scrollbar
- #33626: Fix v5 regressions in tab dropdown functionality
-
#33634: Dropdown: support
.dropdown-item
wrapped in<li>
tags - #33638: Fix toggle between modals example
- #33643: fix: clicking an item in navbar dropdown should not collapse the dropdown in firefox
- #33666: Modal.js: fix test for scrollbar
- #33677: Offcanvas.js: If scroll is allowed, should allow focus on other elements
-
#33684: Don't change the value for
altBoundary
option - #33706: Scrollbar: respect the initial body overflow value
📖 Docs
- #33446: Make offcanvas example fully static
- #33453: Add new docs footer
- #33521: The spacing margin side identifiers 's' and 'e' may be intuitive for …
- #33522: Clarify docs accordion example
- #33543: Update parcel.md
- #33553: Add example: Panels stay open
- #33567: Fixed wrong method name _getInstance
-
#33571: footer: fix
rel=noopener
attribute - #33583: docs: update clipboard.js to v2.0.8
- #33597: Docs: Fix wrong dark attribute in Table - Vertical Alignment
- #33632: Correct the heading for the States section
- #33638: Fix toggle between modals example
- #33664: Docs: fix W3C validation errors in list-group example
- #33668: Update anchor.js to v4.3.1.
-
#33669: Change from preventOverflow to detectOverflow in
boundary
option - #33675: Fix typo
- #33676: Fix Grid System docs
-
#33685: docs: fix the default value of Popper's
boundary
option - #33687: Fixes #33686 typo in RTL docs
- #33690: Add Bootstrap Icons to alerts docs
- #33726: Replace modal and scrollspy placeholder content
- #33733: Tooltip/Popover — Minor doc updates
-
#33735: Clarify
boundary
option description - #33772: Improve overall new examples' accessibility
- #33782: Add new team members to the Teams page
- #33786: Docs: adding intro about web accessibility
- #33797: Update links to CCA, MQ5 prefers-reduced-motion, evergreen WCAG urls
- #33810: Tweak toast docs
- #33829: Update migration guide for some v5 changes
- #33832: Fix doc typo and Bootstrap Icons link
- #33833: refactor(docs): Added form file input variables
- #33834: Rewrite migration guide
Examples
- #33097: Update RTL examples
- #33759: fix: change margin breakpoints for bootstrap logo on double header
- #33681: Fixes signup form in Heroes example
- #33569: Improve responsiveness of Features examples
🌎 Accessibility
🏭 Tests
-
#33578: Remove unnecessary
data-bs-backdrop="static"
from modal tests - #33612: tests: fix random BrowserStack failures in scrollbar
- #33666: Modal.js: fix test for scrollbar
- #33734: Add missing test for clicking select option in a dropdown
🧰 Misc
- #33720: JS tests: add Node.js 16
📦 Dependencies
- Updated numerous devDependencies https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F27
v4.6.0
Highlights
- 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.
CSS
- #31557: Fix form validation tooltip alignment
- #31657: Handle the Ubuntu sans-serif case
- #31700: Suppress flexbox side effects in breadcrumb
- #31882: Slow down spinners when prefers-reduced-motion
- #31886: Fixed: Undefined mixin "deprecate" when importing "bootstrap-grid-scss"
- #32141: Use correct value order
- #32145: Avoid invisible real file input "spilling" out of container
- #32160: Add overflow suppression to custom file label
- #32211: Move negative margin-bottom from .nav-item to .nav-link
- #32212: Remove needless Stylelint disables
-
#32833: Add
.navbar-nav-scroll
for vertical scrolling of navbar content - Add two new variables for pagination border-radius values; backport of #32423
- Remove old/unnecessary reboot bug fix; backport of #32631
- Suppress focus outline for buttons when it shouldn't be visible in Chromium; backport of #32689
- Consistently use
outline:0
rather thanoutline:none
; backport of #32751 - Darken dropdown item hover style; backport of #32754
- Lighten disabled dropdown text to
$gray-500
JS
- #31820: Check for data-interval on the first slide of carousel
-
#31834/#32225: tooltip/popover: add a
customClass
option -
#32001: Move
js/src/index.js
one folder up - #32045: tests: fix sanitizer test
-
#32220: Don't hide modal when
config.keyboard
is false - #32312: build-plugins: switch to "bundled" for babel helpers
Docs
- #31861: Split up dropdown sizing docs to improve rendering
- #31892: Remove redundant visually hidden "(current)" from pagination controls
- #31893: manifest.json: Switch to relative URLs so that we don't need to change the path with every major/minor release
- #31898: switch to suggesting jsDelivr as a CDN
-
#31904:
- docs(forms): use a legend for fieldset instead of aria-label
- docs(forms): fix incorrect legend nesting in fieldset
- #31936: forms: change inline custom radio name
- #31951: Update anchor-js to v4.3.0
- #31960: Explicitly mention emoji fonts, tweak sentence in typography
- #31981: list-group.md: fix snippet
-
#32005: Remove
bugreport.apple.com
since it doesn't work - #32015: Fix redirects
- #32050: Make docs anchorjs links darker on keyboard focus
- #32054: Add callouts about using light colors ideally on a dark background
- #32077: Switch to Hugo
- #32083: mention "Liberation Sans"
- #32087: download.md: link to JS files comparison too
- #32094: Changes to navbar documentation/explanation
- #32106: Clarify JS bundle docs once more for v4
-
#32137: input-group.md: fix wrong class
.visually-hidden
-
#32138: navbar.md: remove
loading=lazy
from snippets - #32147: Fix caniuse.com redirects
- #32151: Mention user-select-all support in docs
- #32196: homepage: split snippets and show copy buttons
- #32203: Switch to jsDelivr for the remaining docs assets
- #32223: introduction: split comments
- #32247: Fix typos in tooltip/popover docs
- #32253: Add Russian translation
-
#32363: Remove useless
.text-left
in Layout / Overview - #32399: Remove duplicated "follow Bootstrap on Twitter" link in Community section
- #32457: Add mention of the bs-custom-file-input plugin needed for the custom file input
-
#32461: style clipboard button on
:focus
, not just:hover
- #32462: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text
- #32634: Remove incorrect mention of dropdowns for dynamic tab behavior
-
#32639: v4: Add an actual
data-touch="false"
example in the carousel docs - #32728: add v5.0 in versions
- #32761: Mention stretched-link constraints with table elements
-
#32789: Remove
role="button"
from CTA links in carousel example - #32791: Docs v4: Sass implementation and rounding precision
-
#32809:
- Clarify Sass import and customize docs for how to modify variable defaults
- Add an npm starter project callout to a few pages
- #32827: Add a live toast example to the docs
- #32759: Mention CSP and embedded SVGs in v4 docs
- docs(dropdowns): clarify where is
.show
applied - Require
.has-validation
for input groups with validation - Fix mobile menu jump & double border
- Remove double spaces from homepage SVGs
- browserconfig.xml: switch to relative image path
- Tweak the wording for collapse to indicate button is preferred/more semantic; backport of #32632
- Clarify the
$enable-shadows
option in our docs; backport of #32685
Examples
- #31979: v4 Examples/Floating-labels: fix bad behavior with autofill
-
#32198: examples: add the version number in
title
Misc
- #29753: Improve build/generate-sri.js regex
- #32003: CI: switch to Node.js 14
- #32008: Update Edge's Rendering Engine on CONTRIBUTING.md
- #32486: BrowserStack: test on macOS Catalina instead of High Sierra
- #32756: Stylelint: disallow some property values
-
Fix for npm 7.x package.json: move
version_short
variable under theconfig
object; backport of #32737 - Update build-examples script so that the resulting examples zip file includes only the needed files
- Various CI tweaks
- Updated devDependencies
Configuration
-
If you want to rebase/retry this MR, check this box.
This MR has been generated by Renovate Bot.