Bootstrap is the most common open-source CSS platform for the rapid development of modern, responsive and interactive websites and applications since its release in 2011. The new stable version of the application is 4.5.2, and the Bootstrap team is all set to launch Bootstrap 5, the latest updated version.
The Bootstrap team has recently launched the first alpha version of the much-awaited Bootstrap 5 after several months of redefining its functionality. Bootstrap 5 alpha gives us a sneak preview of the major new features and updates heading to the upcoming update, although several improvements are still to come. Let’s dive in, including the release date, to find out what’s new coming to Bootstrap 5.
Bootstrap 5 New Highlights and Features
As with any new update, Bootstrap 5 has changed a lot. Let’s see what’s changed and what’s fresh in the upcoming Bootstrap edition.
New Feel & Look
The pages for Bootstrap 5 docs are no longer full width. This move was done in order to:
1. Give the Bootstrap site an improved look and feel.
2. Enhance readability.
3. Make the website feel less app-like and more content-like.
In addition, Bootstrap 5 is getting a brand new CSS-inspired logo. In a rounded square bounded by curly braces, the current logo features the letter ‘B’.
Although these updates have already been introduced in the ‘Blog’ and ‘Icons’ pages, you can expect them to soon be implemented in other areas of the website.
Switching from jQuery to Vanilla JavaScript
Bootstrap has been leveraging the power of jQuery to deliver dynamic functionality such as dropdowns, carousels, menu extension, etc. on their websites and applications for the last nine years. With the emergence of modern JavaScript frameworks like Angular, Vue, and React, however, the Bootstrap team has agreed to remove jQuery as a version 5 dependency.
Bootstrap 5, instead, relies on JavaScript pure vanilla to deliver behaviors such as popover, slider, dropdown, etc. As a result, projects based on version 5 will be dramatically lighter and quicker, and the code will be better managed and maintained. The best thing is, if your project relies on it, you can still use jQuery.
This is one of the most critical improvements made in the last few years to the architecture, making Bootstrap a future-friendly framework that integrates with current frameworks based on JavaScript.
Responsive Font Sizes
For some website developers, designing a looks fantastic from many viewports has been overwhelming. You currently have to manually define precise font sizes for a particular viewport using media queries in order to preserve readability on various viewports.
The upcoming version of Bootstrap will allow responsive font sizes by default, to make the process simple and hassle-free. This will automatically resize the typography elements through Bootstrap’s side project, RFS engine, based on the user viewport.
Dropping Support for Internet Explorer
After jQuery, this is the second essential modification. Internet Explorer is no longer applicable to new web development technologies because it does not support current JavaScript requirements, with Microsoft focusing all its resources into the Edge browser that is based on Google’s open-source Chromium engine.
And this is why the Bootstrap team chose to remove Internet Explorer support. As a result, instead of thinking about breaking the code on older versions of browsers, web designers and developers will now concentrate on creating new web pages.
Enhanced Grid System
Bootstrap 5 is built on top of the current structure of grids. The Bootstrap team has made some changes to it, so that everyone could update to the upcoming version without much effort, instead of replacing the existing grid system with anything entirely different.
In the Bootstrap 5 grid system, here is a rundown of what’s new:
• For resolutions around 1400px, a new extra-extra-large (xxl) grid tier.
• .g* utilities, similar to padding/margin utilities, replace the .gutter classes.
• The new grid system will replace the layout options for the shape.
• The addition of groups for vertical spacing.
• Columns no longer have a position: relative by nature.
Remove Card Decks
Generally, to build cards with equivalent widths and heights that are not attached, Bootstrap developers have to write bulky code.
It’s really time-consuming work, which in Bootstrap 5 is no longer needed. As it provides more responsive control of the improved grid structure, the latest version eliminates the card decks.
Navbar Optimization
A key part of Bootstrap, which developers frequently use, is the navbar component. The navbar is optimised by Bootstrap 5 via:
• Unnecessary “display: inline-block” removal from Flex child components
• Line-height removal: inherit;
• Adding a ‘container’ default feature to the navbar
In addition, a dark dropdown via dropdown-menu-dark class has also been introduced by the Bootstrap team, which transforms the dropdown menu into a black background.
Custom SVG Icon Library
Bootstrap 5 presents its own, brand new, and open-source library of SVG icons carefully designed by the framework’s co-founder himself. That means you don’t have to use libraries of third-party icons like Material Icons or Font Awesome now.
Since these symbols are eligible as a separate package, they can also be included in your projects before Bootstrap 5 is officially released.
Migration from Jekyll to Hugo
For a long time, Bootstrap has been using Jekyll as its static site generator for documentation. Hugo, however, has emerged as the quickest and most versatile static site generator in recent years.
Since Jekyll requires the installation of Ruby and provides a slow generation of static pages, the Bootstrap team decided in version 5 to move from Jekyll to Hugo. Hugo has no external runtime dependencies and is much faster than Jekyll, written in the Go language.
CSS Custom Properties
With support for Internet Explorer dropped, Bootstrap 5 now allows you to use custom CSS assets. While only a handful of root variables were added in version 4 for color and fonts, the upcoming version makes them available in many layout choices and components.
This means that for styling, you will be able to identify and reuse values. Consequently, the knowledge of theme production will be greatly enhanced. To make the platform even more versatile for developers, Bootstrap 5 aims to harness the forces of both Sass and CSS custom properties.
Improved Customizing Docs
Bootstrap 5 adds a whole new Customize section in an effort to boost Docs, using which you can learn how to customize the system.
In addition, version 5 includes a much more comprehensive and beautiful integrated color palette so that without ever leaving the code base, you can easily customize the look and feel of your website or application.
Optimized Forms
Bootstrap 5 features a different, dedicated documentation and component section for Forms. The main aim of this change is to give the emphasis they deserve to all types of forms.
They also redesigned all of Bootstrap’s shape controls alongside the new segment. In Bootstrap 5, they have gone fully custom, unlike adding custom type controls in version 4.
A Brand New Utility API
In order to delete or change the default utility classes, the latest version of Bootstrap comes bundled with a brand new utility API. The new API is similar to the Tailwind CSS utility-first CSS system. It opens up a whole new world of possibilities for sizing, spacing, positioning, and so on to build utility classes.
