At Versoly we use Bootstrap 4 for our blocks and templates and have seen a bunch of templates already start using Bootstrap 5. I wanted to see if it was worth porting our code from 4 to 5 or should we wait.

First step for us was to see how much work it would require to port over.

JQuery has been removed

Bootstrap 5 is removing JQuery as a dependency. That is great for page speed, but it also means that lots of plugins will stop working if they require it as well.

Luckily the team at Bootstrap 5 announced a long time ago that they’re removing it and we have been careful to not include JQuery code or libraries that require it.

It looks like the internals have changed but the external is still the same so that means no need to edit existing HTML to fit.

Extra Colors

Bootstrap 5 includes a lot more colors , but they don’t seem to be easily accessible. You have to add them into the SCSS. Which makes sense for web apps, but for landing page templates not so much.

I was hoping that like Tailwind CSS they would include them all. This would make it possible to use class=”btn btn-blue-100”. We try to follow Bootstrap as much as possible so most likely won’t make this available.

Updated form elements

Most of the form code is the same, however for switches they have changed custom-switch to form-switch which will break our current forms that use a switch.

Enhanced grid system

A new grid tier has been added xxl which is for screens larger than 1400px. Lots of our customers use 1920 and 2560 so this will change the design of the website for a lot of them.

Responsive font sizes (RFS)

RFS has been added to Bootstrap 5 which allows fonts to change size depending on screen size. We already implemented this in our Bootstrap 4 code. It makes working with font sizes a lot easier. However if you have fixed designs it will break the design of your website.

Breaking changes in GitHub issues

V5.0.0-alpha2 has 191 shipped issues, lots of them are just bumping up versions. However there are bug fixes and new features being introduced.

Extra position utilities are being added that will allow “position-absolute top-0”. This will allow us to clean up some extra CSS we have added for our newer templates.

Also seems to be a bugger with the gutters . “Grid container, row, and column padding/margin should always match.” at the moment not all the gutters match. This would add extra support tickets when elements don’t align.

V5.0.0-alpha3 has 9 approved changes, 6 in review and 26 in the inbox as of 22nd Sept.

One of the new features is font size utility , we have already added an extra display 5 and 6 to our Boostrap 4 code. Bootstrap 5 decided to do that as well. With these new utility classes you will be able to change the size based on screen size. Seems to be some conflicts with RFS, so we will need to investigate more if we can use these inside Versoly.

They might also be changing rounded-sm to something less confusing which would break our Bootstrap 4 blocks and templates. We could easily fix our end by just replacing it with its equivalent for customers who upgrade to Bootstrap 5.

Is it worth it?

Not many changes are required to get Versoly working for Bootstrap 5 alpha1. The biggest issues for us would be the switch inputs and the new grid tier. We could most likely fix the switch issue at our end and notify the customer that the grid system has changed.

However there seems to be some bugs (to be expected in alpha1) and new features coming out.

For us we will wait until at least Bootstrap 5 alpha3 is released and will look at what they have planned for alpha4 or the beta.

If you’re working on a web app or a single website, it might be worth upgrading now. The website will load faster and if you upgrade with each alpha release you will have less technical debt. You will need to check if there are any bugs you will encounter when upgrading.