Bootstrap is the most popular CSS Framework for developing customizable, responsive, and mobile-first websites. It is the world’s most popular front-end open-source toolkit, illuminating Sass variables and mixins, responsive grid system, great prebuilt components, and robust JavaScript plugins.

The first stable version of Bootstrap 5 had officially released in May 2021! Now the first minor release of Bootstrap 5 is here! V5.1.0 has landed and is packed with interesting new features and advancements. There is preliminary support for CSS Grid, offcanvas in the navbar, horizontal collapse support, a new placeholders component, new helpers, new CSS variables in our utilities, refactored JavaScript, and more. You can view Bootstrap 5.1.0 documentation on its Official Website.

CSS Grid

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!

Placeholders

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.

Floating labels in Form Inputs

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.

Horizontal collapse

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.

Updated .bg-* and .text-* utilities

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.

Modal and offcanvas backdrops

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.