UI Development

Bootstrap 5 – new aspects

We all know how bootstrap has been the most favored open-source web development framework for its intuitive, sleek and responsive web development approach. The topics like what’s new in version 5 and when its rolling out has become a talk of the town among all the anxious web developers out there. So, let’s check it out.

New Features:

Uprooting jQuery:

As per the official bootstrap team, they have decided to make version 5 – jQuery-free and it will rely on pure vanilla javascript making it effortless while integrating with javascript frameworks. Doing so will definitely reduce the project size and relatively lessen dependency from the client-side.

This change which was announced by the bootstrap team received mixed opinions as some developers elicit that jquery is useful in cross-browser codes. Anyways, we can still use Bootstrap with jQuery if we want to.

Removal of .form-inline and .form-row:

Both the classes “.form-inline” and “.form-row” are deprecated in the new version 5 in the view of the more flexible grid. Instead of using “.form-inline,” using .col-md-auto divs by wrapping the children within this class when necessary is more efficient in terms of flexibility of the grid.

The introduction of the latest gutter classes makes the vertical spacing and gutter widths more easy and efficient to control than using “.form-row” class

No more IE10 support:

The latest version of bootstrap will no longer support the IE10 browser.

Association with Hugo:

We know that static site generators are a must for frameworks to generate sites in the blink of an eye.

The site generator Jekyll is the oldest static site generator. This has been implemented in earlier bootstrap versions which have been a reliable source. Now, in the latest bootstrap version 5, Jekyll will be dropped. Right now, Hogo is the world’s fastest static site generator. Hogo site generator implements the “Golang” language.

Bootstrap 5 now includes Hogo and has made changes to their dependencies, making version 5 even pacier.

Enhancing bootstrap development branch:

As per the official announcement on the website, to develop v5 they will cut a new master branch from v4-dev and master will serve as bootstrap v5’s new v3 dev branch.

Bootstrap’s SVG icon library:

All the previous bootstrap versions lack an integrated icon library and we tend to use font awesome icons or other third party resources for icons.

The bootstrap team is inspecting ways to create its own library consisting of a whole set of complete scalable vector graphics icons which makes this version 5 much more productive. This will invariably reduce our dependency on other parties thereby making our webpages even lighter.

Not compatible for Node js version 8:

Bootstraps’s latest version will not support node js 8.

QUnit removal:

Quint is a traditional javascript unit testing framework. It cannot be launched through test case runners like TConsole, etc and has a browser dependency. The setting up of this testing framework is not clearly documented. First, we need to prepare an HTML file and some pre-defined tags included. We then need to load quint.js, quint.css inside the head section of our HTML file.

It will be longer be included in Bootstrap version-5 and the bootstrap team is working on generating testing infrastructure in jasmine. As per the official bootstrap team, this move is nearing completion.

Supports ESM version:

The upcoming version 5 of Bootstrap will introduce its own ESM (ECMAScript module) using which bootstrap could be implemented as a module.

More receptive containers:

Earlier versions of bootstrap used to have only container-fluid and regular as the choices available at best.

The bootstrap version 5 is expected to possess “.container-md” , “.container-sm” and so on as additional new containers making the webpages even more responsive. It is also announced that position: “relative” property will be depreciated for cols.

Enhanced vertical gutters and gutter widths control:

As per GitHub information, Bootstrap 5 is expected to introduce three new forms of gutter classes as follows:

g-* classes to manage vertical and horizontal gutter width.

gx-* classes to manage the column and horizontal gutter width.

gy-* classes to manage the row and vertical gutter width.

Boostrap 5 current progress:

The official bootstrap team has declared bootstrap V5 and stated many major changes in its to-do list.

At present, more than 730 tasks are shipped category and very few left in the ideas and to-do categories and up to 4-5 tasks left under review category.

Release of Bootstrap 5:

The much-awaited release of bootstrap 5 is expected to be in the spring of the year 2020 and the exact release date is yet to be announced by the bootstrap official team.

About The Author