🚀 Highlights
- #33079: Revamp tabs & follow ARIA 1.1 practices
- #33354: Column Striping Feature for Tables
- #33421: Revamp Scrollspy using Intersection observer
- #33606: Add
.form-check-reverse
modifier class - #34334:
make-col-ready()
: remove the unused$gutter
variable - #34443: Convert navbar to CSS variables
- #34487: Docs offcanvas navbar
- #34547: Prefer Linux-specific fonts over Arial
- #34600: Convert buttons to CSS variables
- #34622: Convert tooltips and popovers to CSS vars
- #34644: Always set the CSS variables for gutters in containers
- #34942: Move reassigned Sass maps for colors to another stylesheet
- #35055: Add
color
andborder-color
CSS variables to tables - #35077: Manipulator: Add JSON parse support
- #35153: Reset
z-index
on.navbar-expand .offcanvas
and preventbox-shadow
when collapsed - #35399: Convert pagination component to CSS variables
- #35401: Convert alerts to CSS variables
- #35402: Convert badges to CSS variables
- #35409: Convert dropdowns to CSS variables
- #35514: Popover.js: Accept empty content through
data-bs-content
- #35518: Add sticky bottom utility
- #35736: v5.2.0 design refresh, plus responsive offcanvas classes
- #35893: Add centered dropdown and dropup options
- #35908: Remove thicker border on table thead elements
- #35979: Adjust border-radius values and add some new utilities
- #36242: Add new
.text-bg-{color}
helpers
🚀 Features
- #33354: Column Striping Feature for Tables
- #33421: Revamp Scrollspy using Intersection observer
- #33606: Add
.form-check-reverse
modifier class - #34519: Add a template factory helper to handle all template cases
- #35077: Manipulator: Add JSON parse support
- #35514: Popover.js: Accept empty content through
data-bs-content
- #35518: Add sticky bottom utility
- #35893: Add centered dropdown and dropup options
- #36272: Toast: provide
isShown
method
🎨 CSS
- #32840: Support floating labels on
.form-control-plaintext
- #33606: Add
.form-check-reverse
modifier class - #34334:
make-col-ready()
: remove the unused$gutter
variable - #34443: Convert navbar to CSS variables
- #34547: Prefer Linux-specific fonts over Arial
- #34600: Convert buttons to CSS variables
- #34622: Convert tooltips and popovers to CSS vars
- #34627: Remove tooltip and popover styling as it is handled by Popper
- #34644: Always set the CSS variables for gutters in containers
- #34863: Color input validation icon
- #34942: Move reassigned Sass maps for colors to another stylesheet
- #35055: Add
color
andborder-color
CSS variables to tables - #35082: Set
cursor: default
on disabled.form-check-label
- #35085: Fixes missing variable issue with
media-breakpoint-only
- #35153: Reset
z-index
on.navbar-expand .offcanvas
and preventbox-shadow
when collapsed - #35230: Don't override CSS
direction
in code elements - #35231: Ensure sufficient contrast in
accordion-item
- #35232: Drop prefixed version of
::file-selector-button
- #35326: Correctly implement RFS in
:root
CSS variable for$body-font-size
- #35399: Convert pagination component to CSS variables
- #35401: Convert alerts to CSS variables
- #35402: Convert badges to CSS variables
- #35403: Convert breadcrumbs to CSS variables
- #35406: Bring back webkit calendar picker indicator for datalists
- #35409: Convert dropdowns to CSS variables
- #35428: Convert border utilities to CSS variables
- #35466: Fix typo in
$purples
- #35467: Add missing
border-radius
forbtn-group
- #35484: Reprocess inline SVGs with the latest SVGO
- #35491: Rely on
border-width
for<hr>
size - #35518: Add sticky bottom utility
- #35533: docs: Move
gap
utility API from "Flex" to "Spacing" - #35554: Separate modal click functionality, utilizing backdrop callback
- #35571: Fix alerts color
- #35592: move theme-colors (vars+map) after color tints definitions
- #35676: Add black to colors map
- #35740: Add
!important
property to colored links - #35759: Fix position of
.list-group-item-action
- #35804: Allow to set active and disabled class also to .page-link
- #35822: Apply list group numbering to all items
- #35825: Correct the horizontal padding on grid containers
- #35829: New CSS variable for Navbars
- #35844: Fixed border radius var name and .show target in buttons
- #35850: Rename dropdown-shadow to dropdown-box-shadow for consistency
- #35858: Add null modal-footer-bg variable
- #35859: Add z-index for .toast-container
- #35862: Convert list group to CSS variables
- #35886: Replace non-existent
--bs-btn-padding
by--bs-btn-padding-{x|y}
- #35894: Base
.text-muted
on body color - #35907: Use all dropdowns CSS variables
- #35908: Remove thicker border on table thead elements
- #35914: Fix dropdowns
- #35917: Define Pagination font size CSS var
- #35918: RTL arrows for popovers and tooltips
- #35921: Split CSS vars for padding values
- #35932: v5.2 border-width is disabled
- #35943: Add missing root border opacity CSS var
- #35960: Convert spinners to CSS variables
- #35961: Convert toasts to CSS variables
- #35962: Convert progress bars to CSS variables
- #35973: Fix dropdowns
- #35976: Fix space between popover's arrow and triggering element
- #35979: Adjust border-radius values and add some new utilities
- #35981: Add additional root variables, rename
$variable-prefix
to$prefix
- #35984: Update docs syntax colors head of dark mode
- #35994: Update
$border-color
to usergba()
- #35995: Ignore warning for
.navbar-light
deprecation - #35996: Add some
calc()
for manipulating new CSS variable version of border-width - #36003: Set opacity on dropdown-divider for now
- #36018: Some CSS fixes
- #36038: v5.2.0 migration updates
- #36058: Fix proposal for
.dropstart
- #36070: Popover : New CSS var
- #36071: Train PR: CSS variables for accordion, cards, navs, and modals
- #36082: Fix duplicate border radius CSS var definition
- #36083: Reuse all breadcrumb CSS vars available
- #36093: Adding
@include font-size
when not - #36098: Use new CSS vars
- #36100: Adding CSS var to list-group-item-action
- #36105: Fix for missing CSS variables on
.navbar-nav
- #36126: Use the
border-color
property instead of the CSS variable in border color utilities - #36145: Improve use of CSS vars in Toasts
- #36148: Add CSS vars for accordions
- #36149: Modal : Changing the CSS var management
- #36157: Add
$input-disabled-color
Sass variable - #36179: CSS : Minor fixes
- #36202: Update _breakpoints.scss
- #36220: Clean up last
$variable-prefix
usages - #36238: Revert
border-color
change - #36239: Iterate on border utilities
- #36242: Add new
.text-bg-{color}
helpers - #36277: Fix proposal for Tooltips
- #36296: Remove leftover abbr styles in Reboot for tooltips
☕️ JavaScript
- #31607: Use Babel and ES6 in docs JS files
- #32692: Clean tooltip component unneeded functionality
- #32999: Extract Carousel's swipe functionality to a separate Class
- #33079: Revamp tabs & follow ARIA 1.1 practices
- #33421: Revamp Scrollspy using Intersection observer
- #33872: Extract Component config functionality to a separate class
- #34509: build: read & dynamically resolve
imports
on plugins build - #34519: Add a template factory helper to handle all template cases
- #34945: Carousel cleanup & refactoring
- #35077: Manipulator: Add JSON parse support
- #35127: tooltip.js: use array.includes instead of for iteration
- #35141: Modal tweaks & cleanup
- #35156: Collapse: refactor active children handling
- #35157: Dropdown remove redundant code
- #35161: Swipe: add test to ensure that it ignores
pinch
events - #35183: JS: minor refactoring
- #35388: Scrollbar: remove margin/padding properties properly
- #35400: Tooltip: Some more changes
- #35410: BaseComponent: add a couple more tests
- #35419: Alert: add a couple more tests
- #35440: Tooltip: remove leftover method
- #35441: Fix popover arrow & tooltip template after the
setContent
addition - #35448: Dropdown tests: Use a function to improve readability
- #35456: Tooltip: remove title attribute before show & add tests
- #35492: ScrollBar.js. Minor refactoring and add test
- #35500: Dropdown: fix toggle focus after dropdown is hidden using the
ESC
button - #35506: build/postcss.config.js: minor tweaks
- #35507: Toast: join multiple
classList
calls - #35510: util/index.js: minor refactoring
- #35511: Tab: minor refactoring
- #35512: Scrollspy: minor refactoring
- #35514: Popover.js: Accept empty content through
data-bs-content
- #35527: Popover/Tooltip: Fix vertical alignment on arrow of tip elements
- #35540: Tooltip: remove extraneous call to
_getConfig()
- #35546: More tooltip refactoring
- #35554: Separate modal click functionality, utilizing backdrop callback
- #35559: Event handler: replace deprecated function & merge
new Event
withnew CustomEvent
- #35589: Remove explicit use of aria-hidden for offcanvas when closed
- #35590: Assorted JS cleanup
- #35682: fix isVisible behavior with new chrome version
- #35684: Selector Engine: improve
parents
method to utilize newer JS native methods - #35689: Optimize jQueryInterface in Collapse
- #35734: src/tooltip.js Optimization
- #35748: Dropdown.js optimizations
- #35752: Dropdown cleanup and fixes
- #35753: Carousel tweaks
- #35754: Event Handler cleanup
- #35766: Dropdown: use a combined selector to filter not shown instances
- #35832: Add static backdrop to offcanvas
- #35856: Make event name helper and use it on tooltip & popover to reduce dist sizes
- #35866: Dropdown: use a better selector to avoid triggering click if button is disabled
- #35870: Dropdown: Simplify dataKeyApiHandler
- #35871: Carousel tweaks
- #35893: Add centered dropdown and dropup options
- #35902: Modal: refactor listeners to reduce some code noise
- #35930: Carousel patches
- #35973: Fix dropdowns
- #35983: Carousel tweaks
- #35990: Carousel patches
- #35991: Patch dropdown.js
- #36028: Dropdown test
- #36169: Handle disabled focused tabs with tab JavaScript plugin
- #36186: EventHandler: change check method for custom events, avoiding regex
- #36217: Document incompatibilities between Bootstrap JS and React/.etc
- #36272: Toast: provide
isShown
method - #36273: Separate docs js assets
- #36324: Revert backdrop utilization, handling clicks over modal
📖 Docs
- #31337: JS docs formatting tweaks
- #31607: Use Babel and ES6 in docs JS files
- #32953: Replace AnchorJS with a Hugo render hook
- #34487: Docs offcanvas navbar
- #35124: Update NuGet docs to specify only .NET Framework projects are supported
- #35154: Add top placement info to offcanvas docs
- #35160: Update typography.md to remove an unnecessary
<abbr>
tag - #35223: Add missing
role="search"
andtype="search"
in navbar doc and examples - #35234: images.md: remove zero-width space
- #35236: Fix typo in RTL Hello World! sentence
- #35264: fix(offcanvas): Add missing titles class
- #35320: Update import stacks required for modifying utilities
- #35327: floating-labels: remove
aria-label
in theselect
example - #35328: Fix spacing utility classes mentioned in navbar supported content documentation
- #35348: Fix typo in vertical alignment of table cells
- #35373: Add missing scss/maps imports
- #35414: Fix variable name in Sass customizing section
- #35434: Breadcrumb docs: drop confusing currentColor and add new callout
- #35446: Update edge-to-edge design instructions
- #35468: Fix variable name in form overview docs
- #35486: Update api.md
- #35497: docs: add Tabler Icons to list of icon packs
- #35532: docs: Add responsive variations for
align-content-between
- #35556: docs: Use
param
to set Bootstrap version in Contents page - #35563: docs: A fix for CSS Variables and some proposal
- #35579: docs: add reference to
sticky-xxl
utils - #35587: Add note to carousel crossfade docs about bg color
- #35588: Docs: Strengthen and expand note about dynamic tabs with dropdown menus
- #35644: docs: add a StackBlitz "Try It" button in code examples
- #35647: Update cspell config
- #35649: Docs: group together reusable CSS for examples in a single stylesheet
- #35696: Docs - Remove duplicate Octicons entry in icons list
- #35713: Remove incorrect statement about the disabled attribute on
<form>
- #35730: Add Spanish translation
- #35735: Change X to Extra
- #35736: v5.2.0 design refresh, plus responsive offcanvas classes
- #35741: docs: remove moot
autocomplete
attributes - #35775: Fix dropdown docs about autoclose and esc key.
- #35778: Fixed typo in documentation form validation section
- #35814: Remove remaining
.navbar-light
classes - #35818: code indentation in readme
- #35827: Fixes #32082
- #35828: Fix typo in Badges CSS variables description
- #35837: Update reboot.md
- #35878: Improve modal component doc
- #35895: Mention form height change in migration guide
- #35903: Separate override for hr's in component examples
- #35905: Site assets:
.bd-bg-purple-bright
→.bd-bg-violet
and drop unused.bd-text-purple-bright
- #35909: update ionicons link
- #35931: Remove unneeded classes from toasts docs
- #35942: update google material icons link
- #35948: docs: add missing
.dropup
in dropup centered example - #35955: docs: Update Japanese translation
- #35980: Redesign the "Added in" badges in the docs
- #35984: Update docs syntax colors head of dark mode
- #36002: Fix docs error after #35644
- #36007: Convert added in badges to shortcode
- #36008: Add v5.1.0 to migration guide, update v5.2.0 additions
- #36013: Remove duplicate entry in migration.md
- #36030: Update parcel.md
- #36038: v5.2.0 migration updates
- #36040: Fix migration guide typos
- #36058: Fix proposal for
.dropstart
- #36073: Fix typo for StackBlitz edit button's tooltip
- #36088: Fix StackBlitz edit feature by selecting the closest example
- #36092: Doc fixes
- #36099: Changing to btnTitle and btnEdit
- #36101: Move "Navbar" before "Navs & Tabs" in sidebar
- #36112: Fix CSpell by adding 'Analyser'
- #36123: Doc: Reorder alphabetically lists of components
- #36137: Change second example of dropdown form
- #36144: Doc: fix modals and navs CSS vars description
- #36151: Update offcanvas example to include .show class
- #36163: Doc: Uniformization of nav tabs content panes
- #36173: Fix Chroma line highlight style
- #36176: v5.2.0: Migrate to DocSearch 3
- #36182: Fix containers page in docs to re-order list so it matches sections b…
- #36188: example: change
.border-right
to.border-end
- #36190: Fix spacing of code snippets
- #36191: Do some CSS and Migration guide cleanup
- #36192: One more code snippet fix
- #36194: Refactor some docs examples CSS
- #36195: Doc: minor modifications in Scrollspy
- #36196: Realign Cheatsheet nav tabs example rendering with the doc examples
- #36199: Minor fixes
- #36203: Docs: update documentation js examples, using es6
- #36204: Rewrite Getting Started > Introduction page to be more guide-like
- #36212: Doc: remove
role="group"
from some split drop* buttons - #36217: Document incompatibilities between Bootstrap JS and React/.etc
- #36218: Doc: mention Popper instead of Popper.js
- #36219: Doc: fix offset content for examples page
- #36245: Update new docs version picker to work on home and examples pages
- #36252: Doc: update path to
@popperjs/core
in parcel.md - #36260: Docs(Scrollspy): minor changes to be aligned with new version of javascript
- #36273: Separate docs js assets
- #36276: Add proper markup on modal's page tooltips and popovers
- #36307: Fix search with xs to md breakpoints
- #36322: Fix contents.md
- #36328: Remove unused
.border-right
rule from modal example CSS file - #36333: Doc: fix text overflow example
- #36335: Minor changes in 'Usage with JavaScript frameworks' description
- #36337: docs: drop Scratch usage
- #36340: Fix a11y keyboard access to docs navigation
- #36344: docs: link to the root page for the homepage
🛠 Examples
- #35223: Add missing
role="search"
andtype="search"
in navbar doc and examples - #35308: update grid example docs
- #35365: Make footer examples responsive to mobile screens
- #35483: Replace inline styles in example "Dropdowns"
- #35699: Docs: replace CSS by utilities in examples
- #35704: Fix spelling mistake in footer example
- #35733: examples: fix a couple typos found with codespell
- #35877: remove opacity utilities from example CSS
- #35898: Remove border of disabled calendar buttons in Dropdowns example
- #35919: RTL carousel example
- #35997: Add another list-group snippet example
- #36075: Fix duplicate
.rounded-*
and.fw-semibold
defs in examples
🌎 Accessibility
- #33079: Revamp tabs & follow ARIA 1.1 practices
- #35223: Add missing
role="search"
andtype="search"
in navbar doc and examples - #35231: Ensure sufficient contrast in
accordion-item
- #35588: Docs: Strengthen and expand note about dynamic tabs with dropdown menus
- #35589: Remove explicit use of aria-hidden for offcanvas when closed
🔧 Utility API
- #35428: Convert border utilities to CSS variables
🏭 Tests
- #35161: Swipe: add test to ensure that it ignores
pinch
events - #35184: tests: try to fix a few random failures
- #35410: BaseComponent: add a couple more tests
- #35419: Alert: add a couple more tests
- #35431: Tests: consistency changes
- #35448: Dropdown tests: Use a function to improve readability
- #35455: Tests: Minor fixes
- #35456: Tooltip: remove title attribute before show & add tests
- #35492: ScrollBar.js. Minor refactoring and add test
- #35501: Fix tests fixture type
- #35585: Fix visual tests
- #35659: tests: replace 'done' callback with 'Promise' to fix deprecation errors
- #35757: Fix Popover test that randomly fails on BrowserStack
- #35765: tests: revisit all tests using Promise.reject instead of throwing an error
- #36028: Dropdown test
🧰 Misc
- #31607: Use Babel and ES6 in docs JS files
- #34509: build: read & dynamically resolve
imports
on plugins build - #35178: Switch to Node.js 16 and npm 8.
- #35313: README.md remove broken "David DM" dependency badges
- #35395: build/change-version.js: fix wrong map usage
- #35447: Remove the now outdated build/svgo.yml
- #35451: package.json: add GitHub Sponsors and reorder properties
- #35452: README.md: wrap file contents in a
details
element - #35454: CI: add
workflow_dispatch
- #35481: JS tests: only test one Node.js version
- #35573: Move linkinator to GitHub Actions.
- #35586: build-plugins.js: use globby package
- #35593: Move cspell to Actions
- #35641: Update nuget/bootstrap.png
- #35647: Update cspell config
- #35680: Update cspell config
- #35846: CI: add issues-helper
- #35910: Release Drafter: add highlights
- #36185: Update CODE_OF_CONDUCT.md
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F32
What's changed
- Replace Sass division with multiplication and custom
divide()
function by @mdo in #34571 - Update RFS to v8.1.0 by @XhmikosR in #34571
- fix(forms): input-group and validation icons by @ffoodd in #32968
- Fix minor visual bug in Firefox caused by
moz-focusring
by @kremit in #32821 - Adjust
SAFE_URL_PATTERN
regex for use with test method of regexes by @nikonthethird in #33153 - Add
sms
in theSAFE_URL_PATTERN
for sanitizer by @XhmikosR in #35074 - Adjust feedback icon position and padding for
select.form-control
by @mdo in #33206 - Carousel: use buttons, not links, for prev/next controls by @patrickhlauke in #33165
- v4: Sass docs for default variables by @mdo in #33392
- Handle complex expressions in
add()
&subtract()
by @ffoodd in #34047 - More concise improvements for
add()
andsubtract()
by @ffoodd in #34432 - Remove
aria-haspopup
from dropdowns by @patrickhlauke in #33624 - Dropdown: support
.dropdown-item
wrapped in<li>
tags by @cpsievert in #33649 - Update Node versions in JS tests (drop Node 10, add Node 16), update docs JS assets and add variables for
vertical-align
in spinners by @XhmikosR in #33807 - Replace Freenode with Libera IRC server by @midzer #34050
- Fix repetition in the Navbar docs description by @coliff in #34208
- Enable
0.x
with negative margins in utilities by @k-utsumi in #33593 - Remove print
thead
rule by @coliff in #34426 - Fix prevented
show
event disabling modals with fade class from being displayed again by @alpadev in #34087 - Input group validation with custom-file input by @ffoodd in #33239
- Add eslint-plugin-qunit and tighten JS tests by @XhmikosR in #32270
- Update our tests to Node 16 and npm 8 by @XhmikosR in #35142
- Disabled link cleanup by @patrickhlauke in #34924
- Updated our devDependencies including terser; also enabled two passes for terser by @XhmikosR
Full changelog
Highlights
- Temporarily patched a postcss-values-parser issue by rearranging our
calc()
functions that use negative numbers. This should restore the ability to import and compile Bootstrap's Sass increate-react-app
. - Added
border-radius
sizes to small and large.form-select
s - Added
align-self: center
to buttons for improved rendering in flex containers - Fixed Collapse regression that prevented toggling between sibling children
- Updated JS Sanitizer to add
sms
in theSAFE_URL_PATTERN
- Improved docs around
.img-fluid
- Added
role="switch"
to our form switches in our docs - Implemented GitHub Issue forms to replace our previous issue templates.
Changes
🎨 CSS
- #34799: fix custom property values of row overrides individual cell
- #34834: Add
align-self: center
to buttons for improved rendering in flex containers - #34853: Add
border-radius
sizes to small and large.form-select
s - #34861: Separator for table direct children
- #35017: Use Sass variable instead of RGB components
- #35033: Add workaround for dart sass compile error
☕️ JavaScript
- #34951: Fix Collapse regression of handling toggling between sibling chilldren
- #34980: Minor refactoring
- #35074: sanitizer: add
sms
in theSAFE_URL_PATTERN
📖 Docs
- #34824: docs: Add
role="switch"
to switches - #34918: docs: Update RFS version & move "v" prefix to config.yml
- #34920: Fix Backdroped typo
- #34921: Fix JavaScript typo
- #34922: fix predefined typo
- #34923: fix utilities typo
- #34926: Improve description of
.img-fluid
in docs - #34935: Non-blocking typo fix
- #34936: replace dummy text with English for Text truncation page
- #34946: Changes some latin/dummy text to English
- #35013: Add offcanvas to the components requiring JavaScript
- #35111: Fix capitalization after period in
contents.md
🛠 Examples
- #35022: examples: Add
role="switch"
to switches
🧰 Misc
- #34626: Implement issue forms
- #34940: Add cSpell custom dictionary and docs-spellcheck script
- #35070: rollup: specify
generatedCode: 'es2015'
- #35086: README.md: fix capitalization after period
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F43
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
📦 Dependencies
- Updated numerous devDependencies: https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F42
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
🚀 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
🎨 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
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
Highlights
- Added new offcanvas component for left, right, and bottom-aligned hidden content
- Added four new snippet-based examples: headers, heroes, features, and sidebars
- Updated the starter template example and a few other examples
- Added new Sass docs section to nearly every page to show variables, mixins, loops, and keyframes from our source code
- Added new
.list-group-numbered
variation to list groups that uses pseudo-elements for numbering list group items. - Removed explicit focus state suppression in Reboot
- Improved carousel swipe behaviors for RTL
- Updated accordions to improve transitions and borders when animating
- Updated Sass customization docs to show how to properly override default variables
- Fixed tooltips not appearing after rapid focus in and out
- Fixed dropdown events not bubbling and forms inside dropdowns not propagating
- Removed flip option from dropdowns
- Disabled select now render consistently in Chrome
- Button elements now grow in
.nav-fill
and.nav-justified
- JavaScript plugin constructors now accept CSS selectors
- De-duped the
.border-0
utility - Fixed event handler removal in dropdown/carousel dispose
- Added new Parcel guide to the docs
- Added input focus blur Sass variable
- Updated
.browserslistrc
to drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).
🚀 Features
- #29017: Offcanvas as component
- #32245: Allow constructors to accept a CSS selector
- #33068: Add
ol.list-group
with pseudo-element numbers
🎨 CSS
- #32747: Add Sass docs (variables, mixins, and loops) to most pages
- #32925: Clear duplicated class
border-0
- #33029: Remove explicit suppression of focus outline
- #33031: Add input focus blur variable
- #33068: Add
ol.list-group
with pseudo-element numbers - #33127: Reset
select:disabled
opacity for Chrome - #33149: Revamp accordion borders to fix pixel jumping
- #33154: Fix sibling card links in RTL
- #33210: Properly set
.list-group-item
color - #33211: Validated controls border in input-group
- #33213: Buttons should grow in nav-fill & nav-justified
- #33325: Remove duplicate text-decoration style for abbr[title]
- #33426: Fix flush accordion styles
☕️ JavaScript
- #30621: modal: don't add margin & padding when sticky is not full width
- #32180: refactor: use a Map instead of an Object in dom/data
- #32245: Allow constructors to accept a CSS selector
- #32446: util: change
isRTL
to a function - #32913: Fix carousel RTL and refactor code, fix rtl swipe issues
- #33000: Fix event handler removal in dropdown/carousel dispose
- #33056: modal: move common code to a new
isAnimated
method - #33120: Remove the default positioning from
.dropup
- #33136: Adjust
SAFE_URL_PATTERN
regex for use with test method of regexes. - #33198: Dropdown — Drop
flip
option - #33248: Accept data-bs-body option in the configuration object as well
- #33257: Dynamic tab should not show when triggered on
disabled
element - #33261: Change the name of the
Offcanvas
constructor - #33289: fix tooltips disappearing after trying to interact during their fade out animation
- #33382: Allow offcanvas to be initialized in open state
- #33385: Use more safe check for 'isDisabled' helper
- #33442: Allow data-toggle="dropdown" and form click events to bubble
📖 Docs
- #30909: Add Parcel Bundler doc
- #32747: Add Sass docs (variables, mixins, and loops) to most pages
- #33006: docs: add bootstrap5 zh-tw in translations
- #33049: Docs improvements after beta2
- #33081: Fix typo in nav-tabs docs
- #33123: Clarify docs around .navbar-brand
- #33207: Add an example of v4's media component in the flex utils docs
- #33246: Update the "Nonblocking files" section in the docs
- #33267: Grammatically update the doc
- #33300: Update modal's
show
method to acceptrelatedTarget
as an argument - #33301: Add example: toggle modal dialogs
- #33322: Fix Flex utilities documentation to add vertical space in example
- #33332: Mention .no-gutters removal in migration guide
- #33333: Fixes some copy around inline forms
- #33380: Utilities to Utilities API (Borders doc page)
- #33386: Update Customize > Sass docs to properly place default variable overrides
- #33430: Add link to new Parcel guide in starter template
- #33443: offcanvas-navbar: add missing redirect
🏭 Tests
- #32662: Unit tests for Popper V2
- #33045: Simplify karma.conf.js
- #33060: Add the missing expectations for touch events
- #33090: Add tests for
DATA_KEY
- #33167: visual tests: add missing base-component dist file
- #33398: BrowserStack: test on iPhone 12
🧰 Misc
- #33067: CI: skip release drafter if we are not on our repo
- #33100: linkinator: replace
--silent
with--verbosity
- #33129: Rename _gh_pages to _site.
- #33130: CodeQL: skip dependabot PRs too
- #33148: Improve change-version script
- #33192: Bundlewatch: stop ignoring dependabot branches
- #33326: Delete the unused build/ship.sh
- #33329: @rollup/plugin-replace: specify
preventAssignment: true
- #33397: .browserslistrc: remove the Edge workaround.
- #33399: .browserslistrc: remove Android and make Safari/iOS 12 the minimum
- #33401: README.md: use shields.io for the tests badge too
📦 Dependencies
Updated numerous devDependencies https://github.com/twbs/bootstrap/pulls?q=is%3Apr+is%3Aclosed+label%3Adependencies+project%3Atwbs%2Fbootstrap%2F34