They have added an experimental version of a new CSS Grid, which is an opt-in replacement to their default grid system. If you want to enable it, you've to disable the default grid, by setting $enable-grid-classes: false and enable the CSS Grid by setting $enable-cssgrid: true. Once recompiled, you’ll be able to switch to the new classes.
Offcanvas in navbars They have extended the .navbar-expand-* classes to include support for offcanvases inside the navbar. Now you can wrap your navbar elements with the proper offcanvas HTML. You've to point your navbar toggler button to the offcanvas, and there you are!
Bootstrap also introduced a new component called placeholder. It provides temporary blocks instead of actual content which helps us to indicate that something is still loading in your site or app. You can also customize it according to your need.
You can view placeholder docs here.
The most anticipated feature is here now! Floating label support has also been added in bootstrap 5. This behavior is similar to the behavior shown by many material design UI frameworks such as MDB. Form validation styles also work as expected with floating labels present.
Finally, they've added official support for horizontally collapsing. The collapse plugin has been qualified to distinguish width VS height for some time (even in v4 of Bootstrap). But there is no working example in their docs until now. Now you can add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.
They built new RGB values and updated the background-color and color utilities, So they can utilize new RGB values for real-time customization without recompiling Sass and on-the-fly transparency for any background or text color.
The use an RGB version of each color’s CSS variable and attach a second CSS variable, --bs-text-opacity or --bs-bg-opacity, for the alpha transparency (with a default value 1 thanks to a local CSS variable in the ruleset). That means anytime you use .text-primary now, your calculated color value is rgba(13, 110, 253, 1). The local CSS variable inside each .text-* class assists in avoiding the inheritance issues when nesting instances of these classes. They’ve added some new .text-opacity-* and .bg-opacity-* utilities to support these changes.
They’ve variablized the class name for the backdrops that are utilized across the modal and offcanvas components. It comes with a new class for the offcanvas backdrop, .offcanvas-backdrop, and perhaps more importantly, some updated z-index values.
Earlier, there was a single offcanvas z-index between the modal and modal backdrop z-indexes, due to offcanvas sharing the modal’s backdrop. Now they have changed this to enable offcanvases and modals to work together better with separate z-index values for offcanvas, the offcanvas backdrop, modal, and the modal backdrop.
There’s much more in this release that we didn’t cover in the above features. You can review the complete list of changes on Github.
Published at : 06-08-2021
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.