Bootstrap 5.2

@mdo September 07, 2022 Bootstrap v5.2.1 is here with fixes from our latest minor release, v5.2. As a patch release, these changes are limited to bug fixes, documentation updates, and some dependency updates. We’ve also continued to iterate on a few other projects to help folks get up and running with Bootstrap with npm, other JS frameworks, and various build tools. Keep reading to learn more. Key changes We’ve updated our calc() functions to work around an postcss-values-parser that prevented our source Sass files from compiling properly when building with React and PostCSS. The fix was to reverse the order of our multiplication inside calc() functions. Be aware you may need to make similar We’ve also :focus to :focus-visible for our .btns. Now, checkbox and radio buttons no longer change their background-color on :focus-visible and they receive no :hover styling. Regular .btns still have their familiar hover and focus styles. We debated not including the button focus change in v5.2.1, but felt it was important enough to close several bugs. Let us know what you think and we’ll continue to refine our implementation. Highlights In addition to the changes above, we’ve fixed bugs across several components: • Accordion • Update color value to use the $accordion-button-color Sass variable instead of our color contrast function • Buttons • Added a transparent default hover border color CSS variable for buttons to fix a visual regression • .btn-link no longer has a gradient when ...

@mdo May 16, 2022 :root level and all our core components. Here’s a quick look at how you can utilize them in your projects. With CSS variables, you can now customize Bootstrap easier than ever, and without the need for a CSS preprocessor. All the power of Sass is still there behind the scenes, but CSS variables adds a ton of power for the future. Use and compose new values, updates styles globally without recompiling, set fallback values, setup new color modes, and more. Let’s dig in. CSS variables? Their official name is custom properties, but they’re often referred to as CSS variables thanks to their most immediate use case for setting specific values. Consider reading In a nutshell, CSS variables allow you to name frequently used values. For example, instead of writing #6f42c1 everywhere, you can set --purple: #6f42c1. Then you can use that variable later on with the var() function. : root We use CSS variables in Bootstrap to set many property values globally, across our components, and in some of our utilities. Groups of variables When we talk about CSS variables in Bootstrap, we’re referring to three major groups: • Root variables — Globally scoped variables available on the :root element ( usually) and accessible by any element throughout the DOM. • Component variables — Variables scoped specifically to each component, usually on the component’s base class, and their modifier classes and Sass mixins. • Utility variables — Used as modifiers within other utility cla...

Bootstrap v5.2.0 is finally stable! We’ve ironed out more bugs, improved more documentation, written new guides and built out new functional environment examples, and so much more! Keep reading for highlights from both beta and stable releases. Docs redesign As previewed in our beta release, the docs have been redesigned! It starts with The docs sidebar navigation has been overhauled to have always expanded groups for easier browsing, a brand new DocSearch experience with search history, and new responsive offcanvas drawers for both sidebar and navbar on mobile. We even updated our version picker in the navbar to cross-link between minor releases! Updated buttons and inputs With our docs redesign, we refreshed buttons and inputs with modified padding and border-radius. Here’s a look at the before and after of Tons of new CSS variables Nearly all our components now have CSS variables for real real-time customization, easier theming, and (soon) color mode support starting with dark mode. You can see what CSS variables are available on every docs page, like --# btn-focus-shadow-rgb ) , .5 ); Values for virtually every CSS variables are assigned via Sass variable, so customization via CSS and Sass are both well supported. Also included for several components are examples of customizing via CSS variables. New _maps.scss Bootstrap v5.2.0 introduced a new Sass file with _maps.scss that pulls out several Sass maps from _variables.scss to fix an issue where updates to an original m...

I am in the process of updating my app from Bootstrap 4 to Bootstrap 5.2 with AngularJS. Previously I had used Angular_UI components but many of those component do not work with Bootstrap 5. In particular, the popover component allowed me to reference a template html file with embedded data bindings provided by AngularJS. Unfortunately that component does not work in Bootstrap 5.2. I'm wanting to use the Bootstrap popover component in its place. However all the example code just uses static html 'hard coded' as a string into the parent html code. It would be much better to be able to have an option that allows me to reference an html file via a URL instead of the text string. I can't see a way to create the dynamic html that could be used in the Bootstrap 5.2 popover component. Any thoughts?

The final stable release of this update to the mobile-first application framework was announced color-mode() Sass mixin, allowing developers to write styles specific to a particular color mode. A new _variables-dark.scss stylesheet, meanwhile, houses dark-mode-specific Sass variables. Also in Bootstrap 5.3.0: • A revamped color palette includes all new Sass variables, CSS variables, and utilities for setting color, background-color, and border-color. • Foreground and background colors have been expanded to include new secondary, tertiary, and emphasis colors, while theme colors have been expanded to include subtle background colors. • Link styling was improved, with new link helpers and utilities. • Navs have new :focus_visible styles that better match custom button focus styles. • CSS variable-based border-width utilities were reverted to set their property directly, as was the case prior to version 5.2.0. (This avoids inheritance issues across nested elements, including tables.) Moving forward, plans for Bootstrap 5.4.0 call for improving the utilities API and related code. Patch releases for 5.3.x are planned to address any issues over the coming weeks.