What’s new in Bootstrap v5.0

What’s new in Bootstrap v5.0

August 6th, 2020 by Rachel Hickey

If you were building a house from scratch, would you spend countless hours milling your own lumber or casting your own bricks? No, you would first gather the ready-made supplies you need to get started building.

That’s essentially what Bootstrap does for developers. It provides ready-to-go blocks of HTML, CSS, and Javascript to get your website running quickly and (almost) painlessly.

Bootstrap makes it easy to integrate many great features to enrich a user’s web interaction without having to code them from scratch. Bootstrap v5.0 is a major update and its first alpha release is out into the wild. This release is just the tip of the iceberg for what’s to come. For now, developers can explore what’s new and provide feedback until the official release. 

So, what’s new? Here’s a few updates that stand out to the team here at BitBakery:

jQuery removed

In a huge step to make Bootstrap v5.0 more lightweight, jQuery is getting the axe. 

While Bootstrap has been using jQuery for more than eight years, the framework has become bloated with years of additions. Moving forward, any features that use jQuery will have to be done with pure or ‘vanilla’ JavaScript code in Bootstrap v5.0 which will help with the file size or weight of the framework.

Switch to Vanilla JavaScript

JavaScript is hands down the most universal programming language in the world. Most modern websites are powered by JavaScript. Almost every modern web browser on desktops, consoles, tablets, gaming systems, and mobile phones include JavaScript interpreters.

With the removal of jQuery, Bootstrap v5.0 gives way to writing efficient vanilla JavaScript code without worrying about the size or adding up any other non-essential functions.

If you know how JavaScript works from the root, this major change won’t affect you too much. For some developers who only know how to use jQuery, this might be a good chance to learn the universal language.

Drop Internet Explorer 10 and 11 support

Remember 1995, when Internet Explorer blew our minds, we played Pogs, and people could go to live concerts with artists like Janet Jackson or The Red Hot Chilli Peppers? (Unfortunately I do not, as I was born a  few years later…)

Today, like large social gatherings, Internet Explorer is no longer relevant.

In fact, Internet Explorer has become a web designer’s nightmare because it doesn’t support modern JavaScript standards. This limits your ability to use the features of newer JavaScript standards and lacks modern CSS properties, limiting your modern web design potential.

This switch is even more beneficial now that Internet Explorer has been replaced by Microsoft Edge. Using Google’s Chromium engine, developers can build from Chromium and their website will work on Chrome and Edge with minimal testing.

This enables web designers and developers to focus more on designing modern web pages without having to worry about breaking any piece of code on old browsers or increasing the size of every project.

If a framework as popular as Bootstrap can drop support for Internet Explorer 10 and 11, others may soon follow suit. 

CSS custom properties

Bootstrap v5.0 would not be interesting without the new Bootstrap CSS class. Thanks to dropping support for Internet Explorer, Bootstrap 5 now supports custom CSS properties.

For example, table components make use of local variables to make striped, hover-able, and active table styles easier. 

We can expect there will be some CSS classes that will no longer be available in the new version and some CSS classes that will be added. 

Switching from Jekyll to Hugo

Jekyll is used to build websites with easy to use navigation, website components and generate content all at once. While Bootstrap v4.0 has been a great tool to integrate with Jekyll, a major switch from Jekyll to Hugo is anticipated.

Hugo is described as “one of the most popular open-source static site generators, making building websites fun again”. Similar to Jekyll, it is a static site generator but written in Go language. Hugo is lightning fast, easy to use and configurable. Compared with Jekyll, it has a great integration with the popular web host and can organize your content with any URL structure.

Should you switch?

If your current projects need support for Internet Explorer 10 and 11, are dependent on jQuery and don’t need new features of Bootstrap v5.0, you can afford to sit tight until a stable version of Bootstrap v5.0 is released.

Alternatively, if you want to use Bootstrap without the dependency on jQuery, or want to utilize the new features of Bootstrap mentioned above, you might want to consider making the switch over to Bootstrap v.05 in your new projects or update your older ones.

Looking forward

One of the most frustrating experiences of being a developer is reinventing the base HTML, CSS, and JavaScript for each project. While some prefer to write their own code, in many cases it just makes sense to use an existing framework like Bootstrap.

With all the new updates coming in Bootstrap v5.0, we’re looking forward to seeing how Bootstrap continues to make the framework lightweight, simple, useful and faster for the developer’s benefit.

What to learn more about the tools we love for our outsource design and development work? Check out what we have to say about Statamic, Tailwind, Figma and more!

February 18th, 2021 by Rachel Hickey
Representation and diversity is crucial to success in tech
January 27th, 2022 by Rachel Hickey
Say hello to our new co-op Annaliese Schropp
July 30th, 2020 by Rachel Hickey
Why you should consider Figma in your design tool-kit