Bootstrap 5

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.

As of the 16^th of June 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.

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.

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 favour 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.

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.

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.

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 added another size unit. Additional classes for vertical spacing were launched.

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.

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.

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 Customise area has been added to explain how Bootstrap can be extended independently. A new colour 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.).

Not all planned changes are currently included in the alpha version. The creators have already announced a few ground-breaking 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.