Bootstrap v5.3.3 with various improvements and bug fixes

Bootstrap v5.3.3

Bootstrap v5.3.3 has been released with various improvements and bug fixes. This version brings enhancements to color modes, documentation updates, and fixes for issues encountered in the previous version. Let’s delve into the highlights and changes made in Bootstrap 5.3.3.

Highlights

  • Fixed Importing Issue: Previously, there was a requirement to manually import variables-dark.scss when building Bootstrap with Sass. Now, _variables.scss will automatically import _variables-dark.scss. However, manual importation of _variables-dark.scss won’t break anything and will be the recommended approach in v6.
  • Selector Engine Regression Fixed: A regression in the selector engine that caused issues with handling multiple IDs has been fixed.

Color Modes

  • Improved Badge Readability: Badges now utilize the .text-bg-* text utilities to ensure that text remains readable, especially when customized colors differ in light and dark modes.
  • Enhancements to Color Modes Script: The color-modes.js script has been fixed to handle scenarios where the OS is set to light mode and the auto color mode is used on the website. Users are advised to apply this change to their own scripts if copied from the Bootstrap documentation.
  • Clarification on Color Schemes: The color schemes description in the color modes documentation now specifies that color-scheme() only accepts light and dark values as parameters.

Miscellaneous

  • Additional HTML Elements Allowed: <dl>, <dt>, and <dd> are now allowed in the sanitizer.
  • Distribution Changes: Evenly distributed items for modal and offcanvas headers have been dropped.
  • CSS Selector Fixes: Accordion CSS selectors have been fixed to prevent inheritance issues when nesting accordions.
  • Focus Fixes: Focus box-shadow for validation-stated form controls and focus ring on focused checked buttons have been corrected.
  • Mobile Navbar Toggler Fix: The product example mobile navbar toggler has been fixed.
  • RTL Processing Change: RTL processing of carousel control icons has been updated.

Documentation Updates

  • Code Block Formatting: Unnecessary right margin for example code blocks has been removed.
  • Emphasis Text Utilities: Correct usage of emphasis text utilities in background utilities examples section has been provided.
  • Accordion Expansion Explanation: A technical explanation on how to render an accordion expanded by default has been added.
  • Vite Guide Update: Vite config path import in Vite guide has been changed.
  • Card Image Description Enhancement: The card image description of the .card-img-* classes has been enhanced.
  • Sass Customization: The shift-color() function has been mentioned in the Sass customization page among tint-color() and shade-color().
  • Cheatsheet Examples Update: The missing type="button" attribute has been added to the Cheatsheet examples navigation buttons.
  • Responsive Colors Table: The colors table in the customization page has been made responsive.