Bootstrap 5 is officially available with a new logo, a new offcanvas component

after more than three years of development, Bootstrap 5 is officially available. The Bootstrap team announced on Wednesday the general availability of the new version of the most popular HTML, CSS, and JavaScript framework on the market, which introduces new features, improvements, and a few breakthrough changes. Bootstrap 5 effectively breaks ties with the jQuery library for pure JavaScript, as it was announced in 2019. Other new features in this release include a new logo, a new off-canvas component, and more.

Bootstrap 5 is officially available with a new logo, a new offcanvas component

after more than three years of development, Bootstrap 5 is officially available. The Bootstrap team announced on Wednesday the general availability of the new version of the most popular HTML, CSS, and JavaScript framework on the market, which introduces new features, improvements, and a few breakthrough changes. Bootstrap 5 effectively breaks ties with the jQuery library for pure JavaScript, as it was announced in 2019. Other new features in this release include a new logo, a new off-canvas component, and more.

“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.

JavaScript

The biggest change related to JavaScript has been removing jQuery, but the team said they also made several improvements beyond that:

  • no more jQuery;
  • all plugins can now accept a CSS selector as the first argument;
  • update to Popper 2;
  • data attributes for all JavaScript plugins are now spaced by names with bs. For example, you can use data-bs-toggle instead of data-toggle  ;
  • the positioning of dropdownpopover, 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

One of the major component additions in Bootstrap 5 is the all-new off-canvas component. Based on sharing the fundamentals of modals, the new off-canvas component features a configurable backdrop, body scrolling, and placement. Offcanvas components can be placed at the top, right, bottom, or left of the display window. Configure these options using data attributes or through JavaScript APIs.

New accordion component

The team replaced the .card accordion component with a brand new .accordion component, fixing several bugs in the process. This new component still uses the Collapse JavaScript plugin, but with custom HTML and CSS to support it. According to the team, it's better and easier than ever to use. It includes chevron-shaped Bootstrap icons indicating status and the ability to click.

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

In Bootstrap 5, the team abandoned the custom .form-file class for additional styles on the .form-control class. This means that it no longer needs additional JavaScript to make the styles of file type field functional, the new form for choosing files entirely CSS.

RTL support

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.

New Utilities

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 .

Dart Sass

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.

Browser Support

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.

What's Your Reaction?

like
0
dislike
0
love
0
funny
0
angry
0
sad
0
wow
0