Bootstrap 5 has come with major changes, including the drop for Internet Explorer (IE) support and jQuery dependency. Developed by Twitter, Bootstrap is the world’s most popular CSS framework. The open-source user interface framework is looking at positioning itself for the future, and this has seen it make ground-breaking changes in v5.
Bootstrap’s drop for IE has made it the first web development tool to do this. The move comes as Internet Explorer’s market share continues to dwindle, accounting for less than 3% of all web browsers.
Read on to see what more improvements have been made to Bootstrap and how they affect you.
1. jQuery Support
Bootstrap will no longer be using the jQuery library. The development team has instead improved the JavaScript library to effect this change. The jQuery dependency wasn't necessarily a bad thing in Bootstrap.
In fact, the introduction of jQuery radically changed how JavaScript was used. It simplified writing tasks in JavaScript that would otherwise have taken many lines of code.
Despite all this, the team has decided to do away with it. This comes with the benefit of smaller source files and higher page load times. This was a much needed change which will see Bootstrap gain a more future-friendly style.
The source file size has become lighter by 85KB of minified JavaScript, and this is key since Google considers page load times for mobile sites as a ranking factor.
As much as the use of jQuery is no longer needed in Bootstrap 5, you can still use it if you want. It is also worth noting that all the JavaScript plugins remain available.
2. CSS Custom Properties
By dropping Internet Explorer support, custom CSS properties (variables) can be used. IE doesn’t support custom properties - just one reason why it held back web developers for a long time.
CSS custom properties makes CSS more flexible and programmable. CSS variables are prefixed with -bs to prevent conflict with third party CSS.
There are two types of variables available: root variables and component variables.
Root variables can be accessed wherever Bootstrap CSS is loaded. These variables are located in the _root.scss file and are part of the compiled dist files.
Component variables are used as local variables in particular components. They are helpful to avoid accidental inheritance of styles in components like nested tables.
3. Improved Grid System
Because there were some issues upgrading from version 3 to 4, Bootstrap 5 retains the bulk of the system this time, building upon the existing system instead of completely changing it. Some of the changes are:
- The gutter class (.gutter) has been replaced to a utility (.g*) much like the margin and padding
- Vertical spacing classes have also been included
- Columns are no longer defaulted to position:relative
4. Improved Documentation
Documentation has been enhanced with more information especially when it comes to customization. A common problem was that with many sites that use Bootstrap, you could immediately identify that it was using Bootstrap. Bootstrap 5 now comes with a new look and feel, and with better customization.
There’s now more flexibility to customize your themes so that not every site or app bears the same resemblance. The v4 theming page has actually been expanded with more content and code snippets for building on top of Sass (the popular CSS pre-processor) files. You can also find a starter npm project on the GitHub platform which is available as a template repository.
The color palette has also been expanded in version 5. The extended built-in color system implies that you can easily style your coloring without having to leave your codebase. More work has also been done to improve the color contrast, including the addition of a color contrast metrics in the Bootstrap color docs.
5. Improved Form Controls
Bootstrap has improved its form controls, input groups, and more.
In v4, Bootstrap was using custom form controls in addition to the defaults provided by each browser. In v5, these are all now customized. All the radio buttons, checkboxes, file, range and more to give them the same look and behavior across different browsers.
The new form controls no longer contain unnecessary colorful markup, but instead focus on the standard and logical design features.
6. Bootstrap 5 Adds Utilities API
Following new CSS libraries like Tailwind CSS, Bootstrap is now also adding a utility library. The bootstrap team says that they are happy to see how other developers are “challenging the way we’ve built on the web for the last decade-plus. ”
Utilities are gaining momentum in the development community and the bootstrap team has taken notice. The team had earlier added provision for utilities in v4 using global $enable-* classes. In v5, they have changed to an API approach and a new language and syntax in Sass. This will give you the power to create new utilities while still being able to remove or modify the defaults given.
As a way to give better organization, some the utilities that were in v4 have been moved to the Helpers section.
7. New Bootstrap Icon Library
Bootstrap now boasts its own open source SVG icon library with over 1,300 icons. It is custom made for the framework’s components but you can still work with them on any project.
Given that they are SVG images, they can quickly scale and can be implemented in many ways and also styled with CSS.
You can install the icons using npm:
$ npm i bootstrap-icons
Install Bootstrap 5
You can go to the Bootstrap 5 official download page if you wish to install it. If you wanted to keep abreast with the latest development release you can use npm to pull it:
$ npm i bootstrap@next
At the time of this writing, the framework is in its Beta 3 version. This means that the software is safe to use but still in development. Feel free to give feedback to the team and make any necessary contribution.