Bootstrap 5.2.1 has been released. Bootstrap is a popular framework to create responsive websites.

Bootstrap 5.2.1

Bootstrap v5.2.1 is here with fixes from our latest minor release, v5.2. As a patch release, these changes are limited to bug fixes, documentation updates, and some dependency updates.

We’ve also continued to iterate on a few other projects to help folks get up and running with Bootstrap with npm, other JS frameworks, and various build tools. Keep reading to learn more.

Key changes

We’ve updated our calc() functions to work around an  apparent bug in postcss-values-parser that prevented our source Sass files from compiling properly when building with React and PostCSS. The fix was to reverse the order of our multiplication inside calc() functions. Be aware you may need to make similar  modifications depending on your own customizations.

We’ve also  addressed some longstanding issues around button focus and active styling, in particular for checkbox and radio buttons. On mobile devices, input-based buttons have trouble shedding their focus styles. This has been resolved in v5.2.1 with a change from :focus to :focus-visible for our .btns. Now, checkbox and radio buttons no longer change their background-color on :focus-visible and they receive no :hover styling. Regular .btns still have their familiar hover and focus styles.

We debated not including the button focus change in v5.2.1, but felt it was important enough to close several bugs. Let us know what you think and we’ll continue to refine our implementation.

Highlights

• Accordion
  • Update color value to use the $accordion-button-color Sass variable instead of our color contrast function
• Buttons
  • Added a transparent default hover border color CSS variable for buttons to fix a visual regression
  • .btn-link no longer has a gradient when $enable-gradients is set to true
• Forms
  • Input groups have updated z-index values to ensure proper rendering of validated form fields
  • Floating labels now reset their text-align to ensure consistent styling
• List Groups
  • Horizontal list groups with only one child now render the correct border-radius
  • Modified the list-group-item selectors to better support nested imports of Bootstrap's CSS
• Modals
  • Fixed modal event listeners during dismiss click, allowing you to once again click scrollbars without dismissing the modal
• Pagination
  • Fixed incorrect border-radius values inside pagination components
• Scrollspy
  • Scrollspy threshold option is now configurable
• Tooltips
  • Reverted some tooltip plugin updates to prevent issues with selector, dynamic content, and disposed tooltips using title

Features

• #36750: ScrollSpy: make the threshold option configurable

CSS

• #36507: v5/docs: reintroduce outline for docs code samples, buttons when :not(:focus-visible)
• #36593: flush variant of accordion border radius
• #36663: fix  #36662 List-group-item margin-top is offset when importing sass in a nested class
• #36694: Docs: add grid-row-columns variable
• #36791: Remove a unused sass parameter from banner mixin
• #36828: Fix pagination page items border radius
• #36849: Define correctly $popover-header-color
• #36873: Fix floating labels under .text-center
• #36874: Floating labels in input group: Border fix
• #36921: Accordion color should use $accordion-color
• #36986: bugfix undefined border color variable for btn  #36938
• #37017: List group: Fix horizontal when only one child
• #37021: Scss: Adding missing z-index CSS variables.
• #37026: Rework button focus/active styling, with extra changes for checks/radios
• #37027: Search modal: Set cursor on auto
• #37034: More consistency for CSS/Sass vars doc for components with dark variants
• #37059: Fix input group z-index focus + validation
• #37078: Remove gradient from .btn-link
• #37079: Add workarounds for postcss values parser error
• #37080: btn-group draws first input margin  #36794
• #37093: Fix accordion button color

JavaScript

• #36750: ScrollSpy: make the threshold option configurable
• #36751: Re-set tooltip title on disposal
• #36863: Fix modal event-listeners during dismiss click
• #37011: Multiple dropdowns: Fix when inside same tag
• #37019: Docs: Fix js options to what is really inside js
• #37072: Docs: Put methods in table
• #37086: Fix tooltip manual toggling

Docs

• #36493: Docs: Replace wrong mobile OS Windows with iOS
• #36587: Document how to extract CSS, SVG for strict CSP
• #36694: Docs: add grid-row-columns variable
• #36771: Fix typos after  #36762
• #36804: Simplify social images and add ability to set per-page images
• #36812: Fix broken url
• #36819: Rename scrollspy to toast in toasts.md
• #36824: Move DocSearch out of offcanvas to always show it on mobile
• #36825: Remove Slack from site and repo docs
• #36827: Redirect users to different templates of issues rather than an empty one
• #36829: Docs: correct heading levels in features example
• #36836: Docs: use added-in shortcode in Offcanvas
• #36838: Docs: Missing added-in shortcode
• #36839: Docs: Fix markdown link error
• #36850: Add navbar image alt text
• #36867: Docs: expand popover custom container explanation
• #36871: Fix docs typo of .form-checkbox -> .form-check
• #36877: Add default select example in cheatsheet
• #37019: Docs: Fix js options to what is really inside js
• #37027: Search modal: Set cursor on auto
• #37034: More consistency for CSS/Sass vars doc for components with dark variants
• #37047: Docs: Minor fixes in tables.
• #37048: Docs: improve cards image overlays markup
• #37056: Docs: Manage the dark offcanvas slightly differently
• #37064: Fix padding on starter template
• #37067: Make docs clearer by dropping precompiled for compiled
• #37070: Improve language around vertical grid gutters
• #37072: Docs: Put methods in table

Examples

• #36660: Added new example in examples/features page.
• #36829: Docs: correct heading levels in features example
• #36877: Add default select example in cheatsheet
• #37064: Fix padding on starter template

Accessibility

• #36507: v5/docs: reintroduce outline for docs code samples, buttons when :not(:focus-visible)
• #36829: Docs: correct heading levels in features example
• #37026: Rework button focus/active styling, with extra changes for checks/radios

Dependencies

• Updated numerous devDependencies:  https://github.com/twbs/bootstrap/pulls?q=is%3Apr+label%3Adependencies+project%3Atwbs%2F8+is%3Aclosed

Release v5.2.1 · twbs/bootstrap