Bootstrap 5.3

Our third alpha release has landed with tons of updates to our components, utilities, docs, forms, JavaScript, and more. This is a larger alpha release for us and sets us up for our first beta where we’ll introduce some final breaking changes and features. We’re trying to move fast and keep the future of the project and the web in general in mind, so this release is an important milestone for us. We’re balancing practical migration from v4 with meaningful changes that reflect the ever-changing front-end community. We think you’ll love this release, so keep on reading and let us know what you think! Components We’ve improved a handful of components in this release, and even dropped one for some new and improved utilities. New accordion We’ve dropped the .card based accordion for a brand new .accordion component, solving several bugs in the process. Our new accordion still uses the Collapse JavaScript plugin, but with custom HTML and CSS to support it, it’s better and easier than ever to use. The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. We’ve included support for a flush accordion (add .accordion-flush) to remove the outer borders, allowing for easier placement inside parent elements. New block buttons Block buttons are no more in v5—we’ve dropped the .btn-block class for .d-grid and .gap-* utilities. This allows for the same behavior and style, but with much greater control over spacing, alignment, and even responsive layou...

NEW • Dark mode is here! You can build and preview websites with dark and light color modes. By default websites are in Light mode, but you can switch them to Dark or to Auto from the Settings dialog. • A new "Theme" panel was added to the bottom right, next to the Design panel. You can use it to modify the built-in Bootstrap variables for either Light or Dark mode. To preview the themes in the app, use the new Color Mode switcher in the toolbar, next to the zoom-in/out and canvas size icons. • A new Theme Switcher component was added which lets website visitors switch between Dark, Light and Auto modes on the fly. Just drag and drop it to the Navbar or somewhere else on the page and the app will automatically generate the necessary JS. IMPROVED • The Icon dialog was improved and now showcases different icon styles for Hero Icons and Font Awesome 5 and 6. Material Icons 4 was also added, with several styles. • The SEO section in the Settings dialog was improved. The Google search preview was updated, a new Website Name setting was added and the Webiste URL setting was moved from Export to SEO for consistency. The app will generate structured data JSON in your index.html page to ensure that search engines present your website the way you've configured it. • The Use CDN and Download Google Fonts export settings are now respected when publishing. • The Breakpoint option in Containers was renamed to Full Width to make it clearer. Navbars now also have the same option for their...

@mdo March 24, 2023 Our second alpha release of v5.3.0 has landed with a ton of enhancements and bug fixes for our new color modes! There’s still more to come, but we’ve held off shipping until we ironed out enough issues. Huzzah, we have! This v5.3.0 release is a monumental update for Bootstrap 5. It’s big enough that it could’ve been a v6 on its own, but we wanted to do right by the community and get color modes out the door without the massive major release upgrade. We’re getting super close now, so bear with us as we continue to chip away at this. And, in the meantime, here’s the rundown on what’s changed since our first alpha. Have a read through the CSS variables • Removed several duplicate and unused root CSS variables. Color modes • Dark mode colors are now derived from our theme colors (e.g., $primary) in Sass, rather than color-specific tints or shades (e.g., $blue-300). This allows for a more automated dark mode when customizing the default theme colors. • Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border. • • Added color-scheme: dark to dark mode CSS to change OS level controls like scrollbars • Form validation border-color and text color states now respond to dark mode, thanks to new Sass and CSS variables. • Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form c...