Bootstrap 5 Release Date and Important Updates

Bootstrap is one of the most popular CSS frameworks around, powering about 18 million websites worldwide and still growing strong.

It's been quite some time since we've seen a major release of Bootstrap. Bootstrap 4 alpha was released on August 19th, 2015, with a stable version available about two and a half years later, introducing many improvements such as flexbox, a better grid system, cards, navbars, and more.

Bootstrap 5 Release Date

Bootstrap 5 alpha was officially released on June 16, 2020.  The development team has confirmed all major changes have been pushed in this new version, with many more on the way in the upcoming beta release.

You can track the Bootstrap 5 project roadmap on GitHub and track updates for future alpha, beta, and production releases.

What's New in Bootstrap 5?

Some of the major changes for Bootstrap 5 will be removing jQuery as a dependency, re-adding custom icons powered by SVG, removal of card decks, navbar optimizations, simplifications to CSS & JavaScript implementations, and support removal for Internet Explorer 10 & 11 (finally!).

Removal of jQuery

I love jQuery, and I still use it in many of my projects today. But the reality is other frameworks have been introduced into (and have slowly over-saturated) the JavaScript world, including React.js, Vue.js, etc. Angular is another one acting as a JavaScript replacement with TypeScript since the conversion from Angular.js to Angular 2+.

Removing the dependency in Bootstrap 5 will lighten the project's size substantially, and will also slightly improve site load times without the requirement of including the additional CSS and JavaScript dependencies.

Dropping Support for Internet Explorer 10 & 11

This is long overdue, and a welcome change at this point. Both Internet Explorer 10 & 11 account for less than 5% of global browser usage today and Microsoft ended support for older versions of Internet Explorer back in 2016 after the birth of their new browser tool, Edge.  Remaining Internet Explorer support will be cut off entirely in November 2020.

The less time users are enticed to use IE, the better. It's the 21st century and, with the other browser technologies that have emerged and evolved since, it's time to put it to rest.

Custom SVG Icon Library

Glyphicons, resizeable icon fonts that are usable in web projects, was a huge part of Bootstrap but was removed as of Bootstrap 4 for being too problematic.

SVG icons are today's standard and a very powerful solution for the upcoming version. You can already get a taste of Bootstrap 5's SVG icon library that was released in mid-December of last year (link below to Bootstrap v5).

Removal of Card Decks

Card decks were customizable content containers introduced in Bootstrap 4 that replaced the old panels, wells, and thumbnails from previous versions. But the card system seemed to be problematic and clunky in comparison to what's being introduced in Bootstrap 5, which will be offering a new grid system that offers more responsive control. In doing so, the card decks that were introduced in version 4 will be removed.

Modal Window Updates

Full-screen modal window support is now available by adding the .modal-xl-fullscreen class to the .modal-dialog div container.

Navbar Optimizations

Bootstrap's navbar component plays an integral part in Bootstrap that gets used all the time. Most sites have a navbar of some sort, and version 5 aims to simplify it even further.

Bootstrap 4 updated the navbar by using nav and div elements mixed with unordered lists. Bootstrap 5 is updating this to use flex shorthand methods and remove the brand margin caused by requiring containers in navbars.

A dark dropdown option is also being implemented via the .dropdown-menu-dark class that converts the dropdown into a black background.

CSS & JavaScript Changes

We can expect a large number of changes to the core JavaScript code as jQuery is being dropped from the project and being replaced with vanilla JavaScript. We can expect to see a large change in the documentation for options and event listeners as well.

As far as CSS changes go, they will most likely be minimal, with improvements to the existing components.

Additional Technical Removals

Other technical elements and classes that will also be improved or removed in Bootstrap 5 include:

  • Better nesting support: Previously, margin and padding conflicts would exist when nesting .row or .col-* elements. This is now updated to be more flexible.
  • List styles removed by default: The .list-unstyled class is no longer required for unordered lists by default. @include list-unstyled() will now be added to .row class elements by default.
  • Relative positioning: This will be removed from all .col-* elements.
  • Global box-sizing: Previously, box-sizing was set globally, introducing some unexpected behaviors for custom CSS. In the future, box-sizing will only apply to columns and elements where needed.

Conclusion

In the end, it looks like Bootstrap 5 will prove to be a faster, simpler, and highly promising product.