v5.0.0-beta2
Pre-release
Pre-release
Highlights
- Dropdowns:
- Updated dropdown plugin to add
data-bs-popper="static"
via JS to the.dropdown-menu
when the trigger has adddata-bs-display="static"
anddata-bs-popper="none"
when in navbars. - Modified several selectors to separate our positioning styles from the Popper.js styles.
- Updated dropdown plugin to add
- 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.
- Added a new
- 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
- Removed
- 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
- Added
- 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]
).
- Updated docs examples to use
- 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
- Dropdown now emits events on the
🚀 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 thanoutline: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 genericError
- #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 theconfig
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