Bootstrap: v5.0.0-beta2 Release

Highlights

• Dropdowns:
  • Updated dropdown plugin to add data-bs-popper="static" via JS to the .dropdown-menu when the trigger has add data-bs-display="static" and data-bs-popper="none" when in navbars.
  • Modified several selectors to separate our positioning styles from the Popper.js styles.
• Navbars:
  • Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It's customizable via Sass and a CSS variable. Read more in the docs.
  • We've re-added flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.
• Forms:
  • Removed vertical-align from .form-select
  • Form validation mixin updated with additional parameters
  • Fixed validation icon placement in .form-select
  • Checkboxes and radio buttons are aligned better in input groups
• Buttons:
  • Added variables for tinting and shading button state colors
  • Suppressed the default focus outline for buttons in Chromium
• Toasts:
  • Added word-break to .toast-body
  • Added a live example to the docs to trigger a real toast
• Carousels:
  • Updated docs examples to use <button>s wherever possible instead of <a> elements.
  • CSS selectors changed for using <button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target]).
• Bundles:
  • Added our helpers to the utilities CSS bundle
• JavaScript:
  • Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
  • Restored the offset option for dropdowns.
  • Fixed modal toggling when clicking on data-bs-toggle="modal".
  • We now build our base component as a separate .js file.
  • We now prevent getSelector from returning URLs as selector which caused errors in dropdown and scrollspy plugins.
  • Refactored components to use a utility function to define jQuery plugins

🚀 Features

• #32037: Add .navbar-nav-scroll for vertical scrolling of navbar content
• #32317: Add variables for modifying button state colours.
• #32376: Support Popper virtual elements

⚡ Performance Improvements

• #32348: Use box shadows instead of linear gradients to colorize tables

🎨 CSS

• #31757: Extended Form validation states capabilities
• #32037: Add .navbar-nav-scroll for vertical scrolling of navbar content
• #32317: Add variables for modifying button state colours.
• #32318: Remove vertical-align from .form-select
• #32324: Add helpers to utilities bundle
• #32348: Use box shadows instead of linear gradients to colorize tables
• #32397: Utility API, RFS option: Only generate responsive classes when needed
• #32415: Reset Popper position in RTL
• #32419: Tweak .form-select padding
• #32423: Add two new variables for pagination border-radius values
• #32436: RTL improvements
• #32440: Expand visually-hidden-focusable so it can be used on a container, …
• #32492: Fix: variables collide with globals
• #32501: .ratio missing variable prefix
• #32524: Remove the initial margin from dropdown/popover in favor of Popper
• #32575: docs(sidebar): invalid CSS value
• #32627: Carousel: use buttons, not links, for prev/next controls
• #32630: Dynamic tabs: use buttons rather than links
• #32631: Remove old/unnecessary reboot bug fix
• #32661: Make carousel indicators actual buttons
• #32670: Add word-break to .toast-body
• #32689: Suppress focus outline for buttons when it shouldn't be visible in Chromium
• #32751: Consistently use outline:0 rather than outline:none
• #32754: Darken dropdown item hover style
• #32761: Mention stretched-link constraints with table elements
• #32785: Lighten disabled dropdown text to $gray-500
• #32787: Remove popover-arrow margin to fix alignment of the arrow
• #32793: Change .form-check background to $input-bg and change transitions
• #32819: Color utils docs
• #32899: Re-add flex-grow to .navbar-collapse
• #32912: Update checks and radios in input groups
• #32930: Fix hardcoded custom prop. in .navbar-nav-scroll
• #32951: fix(accordion): ensure .accordion-button stays left-aligned
• #32986: Dropdown menu alignment fixes
• #33003: Dropdown - Change the selector to check the use of Popper
• #33022: Ensure .navbar-collapse behaves as intended

☕️ JavaScript

• #32285: Refactor components to use a utility function to define jQuery plugins
• #32303: Use the ternary operator in a few more places
• #32309: tests: replace deprecated jQuery method
• #32313: build-plugins: build Base component too
• #32339: Remove SelectorEngine.matches().
• #32376: Support Popper virtual elements
• #32391: SelectorEngine: drop variable used once
• #32392: alert: rename variables for consistency
• #32393: carousel: switch to string constants
• #32394: Remove TRANSITION_END from utils
• #32395: carousel: switch to if/else
• #32405: Add Popper fallback behaviour
• #32420: Tooltip - check if tip and its parent node exist in dispose method
• #32436: RTL improvements
• #32437: Tooltip/popover - change the default value for fallbackPlacements
• #32438: collapse: prevent url change if A nested tag is clicked
• #32443: Restore offset option for dropdown component
• #32465: Tooltip - Add missing callback in async spec
• #32511: modal: move common code to reusable functions
• #32523: Tooltip refactoring
• #32524: Remove the initial margin from dropdown/popover in favor of Popper
• #32585: Throw a TypeError instead of the generic Error
• #32586: Prevent getSelector from returning URLs as selector
• #32603: Scrollspy - Remove unnecessary event argument
• #32625: Dropdown - Emit events on the .dropdown-toggle button
• #32661: Make carousel indicators actual buttons
• #32691: Fix toggling modal when clicking on data-bs-toggle="modal"
• #32750: Fix dropdown keys to open menu
• #32843: Remove custom fallbackPlacements from the dropdown
• #32845: Fix Popper preventOverflow boundary config
• #32882: Add function type for popperConfig option
• #32986: Dropdown menu alignment fixes

📖 Docs

• #32246: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text
• #32259: docs: SVG consistency changes
• #32272: Add a callout for the sanitizer in popovers and tooltips
• #32284: docs: Add Korean translation
• #32287: Typo: show on xxl, if only xl should be hidden.
• #32316: carousel.md: fix $carousel-transition-duration reference
• #32332: Move migration sidebar entry to sidebar.yml
• #32390: docs: Fix Popper-related docs
• #32398: Fix missed occurrencies of "Popper.js"
• #32399: Remove duplicated 'follow Bootstrap on Twitter' link in Getting Started
• #32401: cheatsheet: Drop redundant (current) text
• #32437: Tooltip/popover - change the default value for fallbackPlacements
• #32449: examples: Update font utility classes to new v5 versions
• #32455: docs: Add system-ui to the native font stack documentation
• #32461: Docs: style clipboard button on :focus, not just :hover
• #32463: Straggler lorem ipsum text
• #32464: Add missing has-validation in checkout examples
• #32478: Remove redundant pointer-events: none override for tooltip and popover disabled buttons
• #32479: Clean up lorem ipsum text in popover examples
• #32483: docs: Remove unneeded .form-group class
• #32489: Fix popover docs example
• #32490: Add keyboard-focusable elements for popover on disabled button
• #32512: Docs v5: Fix Sass rounding precision and state Sass implementation
• #32529: Tooltips: add missing space
• #32534: Documentation: added class selector "." to "dropend"
• #32543: API docs: add missing comma
• #32575: docs(sidebar): invalid CSS value
• #32589: Fix navbar docs - active nav-link
• #32620: docs: work around Toast CSS conflict with utils
• #32627: Carousel: use buttons, not links, for prev/next controls
• #32630: Dynamic tabs: use buttons rather than links
• #32632: Docs: Tweak the wording for collapse to indicate button is preferred/more semantic
• #32634: Docs: Remove incorrect mention of dropdowns for dynamic tab behavior
• #32638: Add an actual data-bs-touch="false" example in the carousel docs
• #32661: Make carousel indicators actual buttons
• #32684: Add functions and variables to the utilities API docs imports
• #32685: Clarify the $enable-shadows option in our docs
• #32688: Tweak wording for no-touch carousel
• #32740: Fix typo
• #32744: Document size and multiple aren't supported on floating label selects
• #32745: Add a link to v4.x from the v5 homepage
• #32758: Migration: mention the removal of .rounded-sm/lg utilities
• #32759: Add mention of CSPs and SVGs
• #32760: Add a live toast example to the docs
• #32761: Mention stretched-link constraints with table elements
• #32771: Improve docs regarding RTL migration
• #32778: Document some basic code conventions for us
• #32782: [docs] Update toasts.md
• #32788: Remove role="button" from CTA links in carousel examples
• #32795: Clarifies Sass variable defaults, adds bootstrap-npm-starter callout
• #32819: Color utils docs
• #32842: Docs: add v4.6.0
• #32846: docs: Fix navbar-nav-scroll description
• #32911: migration: mention .form-text changes
• #32912: Update checks and radios in input groups
• #32940: Fix default value for $enable-deprecation-messages
• #32979: Fix boundary config description for dropdown and popover
• #32995: Add a note to change the case type of option name
• #33017: Docs on enforcing HTTPS and avoiding mixed content
• #33027: Revamp sticky header offset to improve a11y

🌎 Accessibility

• #32401: cheatsheet: Drop redundant (current) text
• #32661: Make carousel indicators actual buttons
• #33027: Revamp sticky header offset to improve a11y

🏭 Tests

• #32309: tests: replace deprecated jQuery method
• #32465: Tooltip - Add missing callback in async spec
• #32486: BrowserStack: test on macOS Catalina instead of High Sierra
• #32730: Move "active" class from .nav-item to .nav-link
• #32769: JS: update karma config
• #32904: Minor ESLint rules cleanup

🧰 Misc

• #32185: terser: use 2 passes instead of the default 1.
• #32238: CI: add a 30-min timeout for BrowserStack
• #32312: build-plugins: switch to "bundled" for babel helpers
• #32313: build-plugins: build Base component too
• #32314: CONTRIBUTING: mention dist files
• #32417: Update Release Drafter configuration
• #32452: Update CodeQL Action
• #32453: Few updates for v5.0.0-beta1 NuGet support
• #32469: Improve zip-examples.js
• #32635: CI: update to actions/setup-node@v2
• #32737: package.json: move version_short variable under the config object
• #32755: GitHub Actions cleanup
• #32756: Stylelint: disallow some property values
• #32770: .gitignore: remove Ruby/Jekyll entries
• #32796: CI: change Node.js to 14
• #32799: Update zip-examples.js
• #32917: change-version: remove vendor, add resources
• #32919: CI: switch to the coverallsapp/github-action tag
• #33012: CI: remove the cache fallback and shorten cache key
• #33016: vnu-jar.js: quote vnu path

📦 Dependencies

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