The Bootstrap 5 alpha version has been released on June 16, 2020. You can check the official page for Bootstrap 5 alpha.
The following are some of the expected changes in Bootstrap 5:
As we all know, Bootstrap has made this decision long before. The team had opened a pull request in 2017 aiming to remove jQuery entirely from bootstrap versions, and now in bootstrap 5 alpha it is done and replaced entirely.
Responsive Font Sizes (RFS)
Bootstrap 5 alpha enables responsive font sizes by default. That will automatically resize the typography element according to the size of the user’s viewport through RFS engine or Responsive Font Sizes.
As per RFS repository, RFS is a unit resizing engine. Furthermore, RFS offers the ability to resize every value for any CSS property with units, like padding, margin, box-shadow, or border-radius.
Here’s a quick example of how to use the new grid gutter classes:
Well, Internet Explorer was talk of the town when it was released as it was the only browser to support Java applets and CSS.
Improved customizing docs
There are some good improvisations in the documentation. Like, removing ambiguity, giving more explanation, and providing much more support for extending Bootstrap. It all starts with a whole new Customize section.
The color palette is expanded in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without leaving the codebase. There is an improvisation in color contrast, too.
Also, they have provided color contrast metrics in Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.
As mentioned, Bootstrap 5 alpha has begun using CSS custom properties thanks to dropping support for Internet Explorer. In v4 there were only a handful of root variables for color and fonts, and now developers have added them for a handful of components and layout options.
For example table component, there are a handful of local variables to make striped, hoverable, and active table styles easier
Well, this is by far the most interesting aspect of Bootstrap 5 alpha. A brand new utility API.
By using the utility API from Bootstrap you have unlimited possibilities to create utility classes for positioning, spacing, sizing, and so on.
For example, you will be able to easily expand the number of `m-*`, `p-*` classes, and so on without writing custom Sass code to expand them. Here’s an example showing us how the $ utility variable can be expanded by adding multiple values:
We think this will be a game-changer for those who build on Bootstrap via source files, and if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown.
However, Bootstrap 5 alpha is all set to step up its game and is switched to Hugo. As it is a fast and flexible static site generator.