Bootstrap 5 is Here!

Bootstrap 5’s very first alpha has arrived, and it looks like it’s something to celebrate! Amongst the many differences between bootstrap 5, and its previous version, Bootstrap 4, there are some major ones to look out for.

We'll explore these in the remainder of this article, but you may want to watch the video too.

jQuery and JavaScript

The first major change, which I think people are going to be very happy about, is that Bootstrap no longer depends on jQuery! For many developers, Bootstrap's dependency on jQuery was a deal-breaker, meaning many of them moved away to other frameworks. This could bring many of those developers back meaning Bootstrap may be an even more popular moving forward.

Although I had no issue with jQuery, I understand that it’s an excellent solution to an old problem. However, a lot has changed over the years, meaning most of these problems have now been addressed in newer web browsers.

Dropped Support for Internet Explorer

The second major change is about something even older than jQuery. Bootstrap 5 has officially dropped support for Internet Explorer!

Supporting Internet Explorer was certainly a nightmare, especially over a decade ago when I was working in web development. However with Microsoft promoting Edge, dropping support for Internet Explorer is the norm nowadays.

CSS Custom Properties

Even so, by dropping support for Internet Explorer, we can talk about our third major change - Bootstrap 5 has been able to start using CSS custom properties.

This means being able to define easy to understand variables in one place and use them in multiple other places. This should improve the theming experience, and it looks like theme creators will be busy moving their themes over.

Improved Documentation

The fourth major change is actually to the Bootstrap documentation. It looks like the team have put some great effort in improving their documentation by removing ambiguity, and giving more support to those wanting to extend Bootstrap.

There’s now more content on theming, complete with even more code snippets that help you build on top of Bootstrap's source files. The colour palette has also been expanded!

There’s even an npm project to get you started quicker.

Updated Forms

The fifth major change comes with the re-design of all of Bootstrap's form controls.

Custom form controls for things like checkboxes and switches were possible in Bootstrap 4, but in Bootstrap 5, the claim is that they’ve gone fully custom with standard markup!

Utility API

The sixth major change is the implementation of the new Utility API in Bootstrap 5.

Utilities have become the preferred way to build, which we can see with the success of Utility-first CSS frameworks like Tailwind CSS.

If you build on Bootstrap using the source files, supposedly your mind will be blown by the new experience!

Conclusion

There are many differences in Bootstrap 5, but you’ll, of course, find familiarity too. Things like the grid system are still here in an enhanced form.

If you haven’t seen it before, Bootstrap now has its own icon library called Bootstrap Icons which is definitely worth checking out.

But these are just the first of many enhancements in Bootstrap 5, and it’s just the alpha after all.

It does look like there’s still no built-in dark mode, which appears to be a highly requested addition. Although, for now, custom dark modes can be created by changing a few variables.

Still, you can head over to https://v5.getbootstrap.com to explore the new release for yourself. You can even get it as pre-release using the node package manager, npm i bootstrap@next.

Support this work

You can support this work by getting the e-book. This notebook will always be available for free in its online format.