Bootstrap 5 Release Date, Latest Updates & Features

Bootstrap is one of the most popular CSS frameworks around.  It was originally created in 2011 and still relevant in 2021, and powers over 18 million websites worldwide and still growing strong.

Bootstrap is a remarkable CSS framework that's great for adding responsive design support to your website, and also comes with a plethora of other components, controls, and widgets including customizable modal windows, carousels, icons, and more.

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.

In this article, we'll reveal the official Bootstrap 5 release date along with many of the features you can expect to see.

Bootstrap 5 Release Date

The official stable Bootstrap 5 release date was May 5, 2021.  After a handful of alpha and beta releases dating back to June 16, 2020, you can now take advantage of all the features that Bootstrap has to offer in the latest stable version, downloadable from the official framework website now!

The development team has confirmed all major changes have been pushed to production in this new version, with many more on the way in upcoming releases.

You can track the project roadmap on GitHub for future alpha, beta, and stable version release dates.

Here is the full list showing the history of all Bootstrap 5 release dates:

• Stable: May 5, 2021
• Beta 3: March 22, 2021
• Beta 2: February 10, 2021
• Beta 1: December 7, 2020
• Alpha 3: November 11, 2020
• Alpha 2: September 29, 2020
• Alpha 1: June 16, 2020

What's New in Bootstrap 5?

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

jQuery Removed

I love jQuery, and I still use it in many of my projects today. But the reality is other frameworks have been introduced into 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 will lighten the project's size substantially, and will also slightly improve site load times without the requirement of including the additional Bootstrap JavaScript and CSS dependencies.

Support for Internet Explorer 10 & 11 Dropped

This is long overdue, and a welcome change at this point. Both Internet Explorer 10 & 11 account for less than 4% 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 was time to put it to rest.

Custom SVG Icon Library Added

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

SVG icons are today's standard and a very powerful solution for the upcoming version and will include an extensive icon library created by Mark Otto.

The SVG icon library was pre-released in December of 2019 so adopters of the latest version could get their hands on some early-access functionality.

Switched from Jekyll to Hugo

Jekyll, a very popular static site generator, has been around for a very long time, as well.

In recent years, Hugo has proven worthy and is deemed to be the fastest and most reliable static site generator to date, so it will be taking Jekyll's place.

Card Decks Removed

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.

A new grid system will also be included, offering more responsive control. In doing so, the card decks that were introduced in version 4 will be removed.

Navbar Optimizations

Navbar component plays an integral part in Bootstrap's implementation. 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. Version 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.

Modal Window Updates

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

Pixel Lite and Pixel Pro UI Kits

Pixel Lite is a free, open source UI Kit featuring over 200 individual components, equipped with SASS and Gulp commands and powerful features.

Pixel Pro is a premium UI Kit featuring over 1,000 components and 35 pre-built templates with a user dashboard.  You can check out the live demo on the Themesberg website.

CSS & JavaScript Improvements

A large number of changes have been made to the core JavaScript code as jQuery support has been dropped from the project and replaced with vanilla JavaScript.

As far as CSS changes go, they remain minimal, providing improvements to the existing components.

Additional Technical Updates and Removals

Other technical elements and classes that will also be improved or removed 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, Bootstrap 5 should prove to be faster, more simplistic, and more attractive from a design and layout perspective.

Check back on this article frequently as I'll be providing more news about future Bootstrap 5 release dates as they're revealed.

Download Bootstrap