Bootstrap 5 is officially available with a new logo, a new offcanvas component
“Bootstrap 5 is officially here! After three alphas, three betas, and several months of hard work, we are releasing the first stable release of our new major release. It has been a crazy adventure made possible by our maintainers and the amazing community that uses and contributes to Bootstrap, ”the team said in a blog post announcing the new version of the framework. Here are some highlights of Bootstrap 5.
A New Logo
According to the Bootstrap team, one of the biggest changes in v5 has been the logo redesign and the updated documentation design. “Inspired by our work on Bootstrap icons, our new logo is reminiscent of CSS braces and our long-standing B icon. This is a small update, but fun nonetheless, and one that we believe sets the tone for this major new release. Still the same Bootstrap, but slightly improved, ”the team explained in their blog post. New documents are cleaner, better organized with new content sections, and navigation is also improved.
- no more jQuery;
- all plugins can now accept a CSS selector as the first argument;
- update to Popper 2;
- the positioning of dropdown, popover, and tooltip has been revised with the arrival of Popper v2;
- the positioning of the toasts has also been reviewed and is now based on the new positioning utilities;
- added the ability to use custom classes for tooltips and popovers ;
- various optimizations have been made to better share code between components;
- modification of dropdowns to emit events on .dropdown-toggle instead of .dropdown ;
- removal of the underscore from public static methods such as _getInstance () in getInstance () ;
- renaming of whiteList to allowList in popovers and tooltips.
New off-canvas component
New accordion component
The team included support for a flush accordion component (add .accordion-flush ) to remove the outer borders, making it easier to place in parent elements.
New forms components and update
The team announced that they have revamped the documentation and components of the forms. She says she has grouped all the styles of forms into a new section dedicated to forms, including the input group component to give them the prominence they deserve. In addition to the new documentation pages, the team redesigned all of the form controls.
In v4, it introduced an extensive suite of custom form controls, including controls, radios, switches, files, and more, but these were in addition to the defaults provided by each browser. With v5, the team has opted for total customization.
Checkbox and radio button
According to the team, if you're familiar with v4 form markup, this shouldn't seem too far out. With a unique set of form controls and an emphasis on reworking existing elements rather than creating new ones through pseudo-elements, the look and feel are much more consistent.
Each checkbox (each radio button, each selection, each file, each range, etc.) includes a custom appearance to unify the style and behavior of form controls, regardless of the operating system and the browser. These new form controls are all based on fully semantic standard form controls: no more unnecessary markup, just form controls and labels.
Floating Labels Floating
labels support text entries, selections, and text boxes. The team explained that there is a limitation with text boxes where multiple lines of text can be obscured by the floating label.
New field for file choice
This new version is also marked by the addition of RTL (Left-To-Right) support to Bootstrap. At a high level, the team's RTL approach includes a handful of changes:
- new RTL versions of the dist CSS file, which includes Grid, Reboot, utilities, and standard packages;
- new RTL documentation to get you started;
- five new RTL examples that show the team's CSS RTL approach in action, converting the Album, Cash Box, Carousel, Blog, and Dashboard examples into all-new RTL equivalents;
- two new cheat sheets: the default cheat sheet for standard CSS and the RTL cheat sheet.
New Utilities API
The team implemented a brand new Utility API in Bootstrap 5 as the primary means of extending Bootstrap's default utility classes. Easily build and customize utilities with support for custom class names, support for generating state-based classes like hover, printed versions, etc. The team said that since utilities became a preferred build mode, they've worked hard to find the right balance to implement them in Bootstrap while providing control and customization.
In v4, she did this with the $ enable- * global classes ., and it continued its efforts in v5. But with an API-based approach, she has created a language and syntax in Sass to allow you to create your utilities on the fly while still being able to modify or delete the ones she provides.
Speaking of utilities, the team has added some new ones to their arsenal, including:
- added positioning utilities: top, right, bottom and left with values of 0, 50% and 100%;
- added .d-grid option , as well as new spacing utilities to facilitate grid layout;
- added .fs utilities for font size;
- renaming of the font-weight utilities to .fw ;
- added .rounded-1 , .rounded-2 and .rounded-3 for new small, medium and large border radius utilities;
- added .overflow-visible and .overflow-scroll utilities .
The team has announced that it has moved to Dart Sass as LibSass is deprecated. “We tested our builds with Dart Sass for a while and decided to ditch LibSass, which has been depreciated for a few weeks. We are keeping the Sass modules for now. We are still not using the new mod system for compatibility reasons and to facilitate the update to v4, ”she said.
The Bootstrap team has dropped several older browsers and some platforms in this update, making it one of the biggest changes in some time:
- removal of Microsoft Edge Legacy;
- removal of Internet Explorer 10 and 11;
- Firefox removal <60;
- abandonment of Safari <10;
- abandonment of iOS Safari <10;
- dropout of Chromium <60;
- abandonment of Android <6.