Bootstrap 5: the most important updates

Bootstrap is among the favorite frameworks for the frontend development of websites. The tool lets developers create templates for CSS and HTML to ease modern web design. Layouts, fonts, buttons, and various navigational elements allow for a quick and simple development and placement.

Originally developed for Twitter, the framework is available for free as an open source project. Bootstrap 5 is the latest alpha version update.

When will Bootstrap 5 be released?

As of June 16th 2020, Bootstrap 5 has been available as an experimental alpha version. Many of the planned changes have already been implemented, but full development is not finished. At the same time, patches for version 4 of the framework have been made public. The release timetable is not yet available. Therefore, it’s not entirely clear when a first beta version or the final version will be ready to be used. If timings of the predecessor are anything to go by, we may be in for a long wait: it took 2.5 years between the alpha release and the final version of Bootstrap 4.

Note

Are you new to Bootstrap and would like to take the first steps to getting to know the frontend framework? Find out how to get started in our Bootstrap tutorial. If you’re unsure whether Bootstrap is the right solution for your needs, check out the available Bootstrap alternatives that may suit your project better.

Bootstrap 5 – what’s new?

The Bootstrap team announced hundreds of changes for the latest version update. Many of these are small development changes running in the background but there are a few larger updates that will be significant for developers using the open source framework.

Tip

Want to establish a professional website online but don’t have the time or know-how? The IONOS MyWebsite Design Service makes it easy to create a professional web presence.

No support for Internet Explorer

Although support for Microsoft Internet Explorer has long been terminated, a few users still cling to the browser. The number of users decreased so much that Bootstrap 5 no longer supports it. Because Internet Explorer is now outdated and is no longer being developed by Microsoft in favor of Edge, developers had to add a lot of unnecessary code in the past.

Now, projects in Bootstrap are smaller. That’s because the old Microsoft browser was incapable of dealing with new JavaScript methods and required additional coding efforts that resulted in larger data files, and more time required for optimal web design.

No more jQuery

To make working with JavaScript easier, many web designers and developers use the free jQuery library. Bootstrap long supported jQuery. But the latest update ends support for jQuery because users of Bootstrap 5 no longer depend on the library. Even without jQuery, frameworks can be easily and quickly generated using the extended JavaScript code, HTML or CSS alternatives.

The result is that projects created with Bootstrap are now slimmer. This reduces data sizes and loading times which makes for an improved user experience.

CSS Custom Properties launched

Because Internet Explorer is no longer supported, Bootstrap 5 is focuses on modern web design techniques. This includes CSS Custom Properties, known from Sass und Less but also classic CSS. The properties (often referred to as variables) simplify use of CSS. Modern layouts can be more easily generated in this manner.

Extended Grid

As of version 4 of the frontend framework, layouts could be created using CSS Grids. Bootstrap 5 retains and even extends support for Grids. With xxl, the team has addedanother size unit. Additional classes for vertical spacing were launched.

Hugo instead of Jekyll

Until now, Bootstrap was tightly connected to the Static Site Generator Jekyll. However, the tool has the disadvantage that usage Designer Ruby needs to be preinstalled. That’s why the developer team decided to swap to Hugo which is based on the modern language Go and does not require additional software installs running in the background. Furthermore, Hugo promises to be faster than its competition.

New Utilities API

To boost flexibility and push the extension of Bootstrap, Bootstrap 5 provides a new way to integrate libraries and toolkits. Previously, developers could only integrate external libraries and tools belonging to a certain class. The update provides a unique interface developed with Sass. Additionally, developer-own utilities can be integrated and those provided by Bootstrap are easily removed if they’re unsuitable for a project.

Clearly laid-out documentation

The rapidly expanding Bootstrap project requires proper documentation. Only in this way, new users as well as experienced Bootstrap designers can become fully familiar with the framework. That’s why the update includes tidier documentation. A Customize area has been added to explain how Bootstrap can be extended independently. A new color palette was added that provides more options for designing directly within the codebase.

Bootstrap Forms have also been updated. Information on how to create forms is now much quicker to find. In this context, the latest version sports plenty of innovation: Bootstrap 5 lets users flexibly design control elements (buttons, boxes, radio switches, etc.).

Additional changes announced

Not all planned changes are currently included in the alpha version. The creators have already announced a few groundbreaking additional changes to be implemented in the next releases:

  • Right-to-left (RTL): Languages read from right to left will receive additional support.
  • Offcanvas menu: Offcanvas provides additional options to design menus.
  • SVG in HTML: SVG data are currently being integrated via CSS, but will be supported by HMTL code in forthcoming version updates.
Summary

Bootstrap 5 hasn’t reinvented the wheel. That’s precisely what its designers were aiming for, though, in order to allow for a smooth transition between version 4 and version 5. The elimination of jQuery could require some getting used to for experienced Bootstrap users. Following a brief adjustment period, the advantages are obvious. Additional changes promise either a simpler working process or leaner, faster code.


Wait! We’ve got something for you!
Have a look at our great prices for different domain extensions.


Enter the web address of your choice in the search bar to check its availability.
.org
$1/1st year
then $20/year
.com
$1/1st year
then $15/year
.info
$1/1st year
then $20/year
.me
$1/1st year
then $20/year