Bootstrap 5

Bootstrap is among the favorite frame­works for the frontend de­vel­op­ment of websites. The tool lets de­vel­op­ers create templates for CSS and HTML to ease modern web design. Layouts, fonts, buttons, and various nav­i­ga­tion­al elements allow for a quick and simple de­vel­op­ment and placement.

Orig­i­nal­ly developed for Twitter, the framework is available for free as an open source project. Bootstrap 5 is the latest alpha version update.

As of June 16^th 2020, Bootstrap 5 has been available as an ex­per­i­men­tal alpha version. Many of the planned changes have already been im­ple­ment­ed, but full de­vel­op­ment 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 pre­de­ces­sor 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 de­vel­op­ment changes running in the back­ground but there are a few larger updates that will be sig­nif­i­cant for de­vel­op­ers using the open source framework.

Although support for Microsoft Internet Explorer has long been ter­mi­nat­ed, 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, de­vel­op­ers had to add a lot of un­nec­es­sary 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 ad­di­tion­al 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 de­vel­op­ers 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, frame­works can be easily and quickly generated using the extended JavaScript code, HTML or CSS al­ter­na­tives.

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

Because Internet Explorer is no longer supported, Bootstrap 5 is focuses on modern web design tech­niques. This includes CSS Custom Prop­er­ties, known from Sass und Less but also classic CSS. The prop­er­ties (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. Ad­di­tion­al classes for vertical spacing were launched.

Until now, Bootstrap was tightly connected to the Static Site Generator Jekyll. However, the tool has the dis­ad­van­tage that usage Designer Ruby needs to be pre­in­stalled. That’s why the developer team decided to swap to Hugo which is based on the modern language Go and does not require ad­di­tion­al software installs running in the back­ground. Fur­ther­more, Hugo promises to be faster than its com­pe­ti­tion.

To boost flex­i­bil­i­ty and push the extension of Bootstrap, Bootstrap 5 provides a new way to integrate libraries and toolkits. Pre­vi­ous­ly, de­vel­op­ers could only integrate external libraries and tools belonging to a certain class. The update provides a unique interface developed with Sass. Ad­di­tion­al­ly, developer-own utilities can be in­te­grat­ed and those provided by Bootstrap are easily removed if they’re un­suit­able for a project.

The rapidly expanding Bootstrap project requires proper doc­u­men­ta­tion. Only in this way, new users as well as ex­pe­ri­enced Bootstrap designers can become fully familiar with the framework. That’s why the update includes tidier doc­u­men­ta­tion. A Customize area has been added to explain how Bootstrap can be extended in­de­pen­dent­ly. A new color palette was added that provides more options for designing directly within the codebase.

Bootstrap Forms have also been updated. In­for­ma­tion on how to create forms is now much quicker to find. In this context, the latest version sports plenty of in­no­va­tion: 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­break­ing ad­di­tion­al changes to be im­ple­ment­ed in the next releases:

• Right-to-left (RTL): Languages read from right to left will receive ad­di­tion­al support.
• Offcanvas menu: Offcanvas provides ad­di­tion­al options to design menus.
• SVG in HTML: SVG data are currently being in­te­grat­ed via CSS, but will be supported by HMTL code in forth­com­ing version updates.