Everything You Need to Know About Bootstrap 5

Bootstrap is a powerful front-end library, that gives you the power of quick design and responsive mobile-first site layout. It lays on top of the 12 grid system and it has extensive pre-built components.

If you don’t know much about it, you can check out my article about V4 and with some simple examples, you’ll have a nice foundation.

In this article, I’ll just sweep through what has changed in V5 and talk about their importance. Bootstrap 5 is an alpha release now and we are waiting for the stable version. You can check the issues and pull requests on their Github repository.

List of Content

1. jQuery removal and switching into JavaScript
2. Responsive font sizes
3. Drop Internet Explorer support and CSS custom properties
4. Change of Unit Measurement
5. Enhanced grid system
6. Class Updates
7. New SVG Icon Library
8. Utilities API
9. Improved Doc

jQuery Removal and Switching into JavaScript

jQuery is a library that offers an abstraction layer for classic web scripting. The extensible nature of it allows the developer to reach an element in a document without writing a lot of JavaScript. You can modify the elements, respond to a user’s interaction, or retrieve some information from a server without refreshing the page with AJAX and the list goes on.

Even though jQuery has incredible helpers, it has lost its popularity nowadays because of its load time and rise of other frameworks/libraries like React, Angular, and Vue. These modern tools use a virtual DOM to interact with the real DOM and this way is much faster than the sites that use old jQuery.

So, for those reasons, Bootstrap left jQuery and start using only Vanilla JavaScript. Now you can use efficient Vanilla JavaScript without worrying about the addition of non-essential functions and the addition of global objects which jQuery adds.

Responsive Font Sizes

Designing a website for different platforms and viewports can be challenging. To overcome this problem developers need to use media queries that allow the page to look different on different viewports.

RFS is a unit resizing engine. It automatically calculates the appropriate font size based on the screen size. It can be used for any CSS property with units. It was in V4 already but now it’s enabled by default in V5.

Drop Internet Explorer support and CSS custom properties

In 1995, Microsoft released Internet Explorer and in those days it was a popular browser due to its support for CSS and Java applets. However, nowadays it’s already lost its popularity and became a nightmare to designers since it does not support modern JavaScript standards. To use IE you need to compile your JavaScript code into ES5 which increases the size of your project. Even worse, you can not use modern CSS properties and this limits your ability to design your page properly.

In Bootstrap 5, the team decided to drop the support for IE and focus more on new classes and CSS custom properties. This enables the developers to concentrate on more robust design without worrying about old browser support and increased project sizes.

In V4 there were only root variables for colors and fonts. Now the team has added more components and layout options. You can apply the striped, hoverable, and active style much easier, and now they are working on utilizing powers of Sass and CSS for more flexible systems. For more information click here and go to CSS Custom Properties.

Change of Unit Measurement

CSS offers different types of unit measurements such as px, rem, em, %, vw, and vh. The px is widely used and known as an absolute measurement. The px measurement does not change with different screen sizes and it is not a suitable choice for responsive web design.

Bootstrap has been using the px measurement for its gutter width and now with V5 it has been changed into rem or “root em”.

The rem calculates the font size of the root element and arranges the size depending on that root element. (For most browsers it is 16px).

Enhanced Grid System

In V4 we already have a great 12 column grid system. Now it is time to say hello to the ‘xxl’ grid which is for screens more than 1400px wide. Gutter classes have been replaced with ‘g-*’ utilities much like margin/padding utilities. You can use ‘gx-*’ or ‘gy-*’ to have space between your columns and rows. To learn more please look here. In addition to those, columns are no longer ‘position: relative’ by default. To understand more I found this pull request to be very helpful.

Class Updates

In V4 there are more than 1,500 CSS classes. Some CSS classes are no longer available in V5 and there are some additions to the classes as well.

Some of the CSS classes removed from Bootstrap are:

• * form-row
• * form-inline
• * list-inline
• * card-deck
• Some CSS classes added to Bootstrap are:
• * g-*, gx-*, gy-*
• * rows-cols-auto

New SVG Icon Library

In Bootstrap 4, there was no library for icons so developers needed to find a free icon provider like Font Awesome or use their own custom icons.

In Bootstrap 5, there is a brand new SVG icon library. Before the stable version release, you can use this library and add icons to your project. You can visit this page to learn more.

Utilities API

In V4, you can control and customize the page with the global ‘$enable-*’ classes, and in V5 it’s carried forward with an API based approach. The developers created a language and syntax in Sass for us to create our own utilities. You can even modify or remove utilities with this API based approach. According to their blog site:” We think this will be a game-changer for those who build on Bootstrap via our source files, and if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown”. This makes me excited because I’ve rarely used Bootstrap source files and now I am thinking of using them more often after seeing the stable release.

Improved Doc

Their documentation static site generator has switched from Jekyll to Hugo. As their saying, Jekyll requires Ruby to be installed, and site generation was slow, so they decided to change into Hugo.

While the static site generator change is important there is something that is more important. They now have a ‘Customize Doc’ which extends on V4’s Theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. They even have a starter npm project for us to get started easier and faster.

Conclusion

One frustrating issue for web developers is doing some repeated tasks for all of their projects. It can be like reinventing the wheel every time you start a project. Bootstrap can be helpful for these kinds of duties and also just to have great responsive layouts.

Bootstrap 4 is already in use and very suitable for these kinds of tasks. With the update to V5, I believe it will be even more attractive and get more attention from the developer community.

If you want to see all the changes in a list, check them out here. For more information, you can view their blog. I found this article to be very useful and contains information about the changes in Card components and NavBar optimization.

When a stable version is released, hope to write again with more context.

This article was previously published behind a paywall.