The Bootstrap 5 Alpha was released in June 2020. The new Bootstrap removes jQuery and no longer supports Internet Explorer (IE). The team said it’s time to move on from "what’s outdated or no longer appropriate".
The Bootstrap framework, originally developed and open-sourced by Twitter, has been an indispensable tool for web developers. It provides a ready-to-use set of UI components and a grid system essential for adaptive web pages that need to display well across PC and mobile browsers. Since its inception, Bootstrap has always had a dependency on the jQuery framework. The jQuery framework, originally created in 2006, is one of the most popular JavaScript frameworks of all time. It provides powerful language features and cross-browser compatibility in an era when web technologies are going through many challenges and experimentations to support a variety of use cases ranging from interactive web pages, single-page apps, AJAX requests, and mobile web apps.
Fast-forward to 2020, with JavaScript standards and dominant web browsers already supporting most of the features in jQuery, the Bootstrap team decided to move on. The Bootstrap 5 framework has removed jQuery as a requirement. It saved 85KB of minified JavaScript, which could be significant as Google starts to use page speed as a ranking factor for mobile web sites, and soon for desktop web sites as well. The Bootstrap team does this because Bootstrap 5 also no longer supports Internet Explorer. The team noted that all supported browsers provide jQuery replacement features in vanilla JavaScript. The decision to drop Internet Explorer is probably due to the fact that IE’s market share has now dropped below 3% even among Desktop PC users.
Developer Flavio Copes has an article on "Should you use or learn jQuery in 2020." In it, he pointed out vanilla JavaScript replacements from jQuery’s most popular features. Here are some examples.
- Selecting DOM elements using the # or . notation:
document.querySelector('.button') - Waiting for page DOM to load:
document.addEventListener("DOMContentLoaded", () => { ... }) - Executing AJAX requests:
fetch('/api.json').then(response => response.text()).then(body => console.log(body))
If developers create a new web application in 2020, jQuery will probably no longer be necessary. The web has finally evolved beyond jQuery.
Another benefit of dropping IE is that Bootstrap 5 supports CSS custom properties. They make CSS more flexible and even programmable. For some examples, check out the docs on how to style tables in Bootstrap 5.
Besides dropping jQuery, Bootstrap 5 also brings some notable features. Bootstrap 5 has an updated UI look and feel to focus more on-page content. It has a redesigned and better-looking set of custom form controls. It also has a new logo and 300+ additional icons. For web sites that make heavy use of icons, the new SVG sprite allows developers to load all icons in a single SVG file and then use them as needed. That will likely increase web site performance and improve HTML readability.
The Bootstrap framework is open-source software available under the MIT license. Submitting bugs and fixes of Bootstrap 5 alpha to the team via its GitHub repo are welcomed.
