What’s New About Bootstrap 5
Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code and the most popular front-end framework used for building modern design , responsive, and dynamic interfaces for professional design web pages, is currently undertaking a major update, Bootstrap 5.
Latest updates
Bootstrap 5 beta 2 was released on February 10, 2021.
Bootstrap 5 beta 1 was released on December 7, 2020.
Bootstrap 5 alpha 3 was released on November 11, 2020.
Bootstrap 5 alpha 2 was released on September 29, 2020.
Bootstrap 5 first alpha was officially released on June 16, 2020.
The most important changes:
- jQuery Removed
- Switch to Vanilla JavaScript
- Responsive Font Sizes with RFS v9 Implementation
- Drop Internet Explorer 10 and 11 Support
- Change Gutter Width Unit of Measurement
- Remove Card Decks
- Navbar Optimization
- Custom SVG Icon Library
- Switching from Jekyll to Hugo
- Class Updates
- RTL Support
jQuery Removed
While Bootstrap has been using jQuery for more than 8 years, jQuery has become quite a large framework that requires websites using it to download and add trivial load time for a library that may not be used by any other plugin except Bootstrap itself.
As JavaScript frameworks like Angular, Vue and React dominate the web development community nowadays, jQuery has been losing its popularity as most of these modern frameworks work through the virtual DOM and not on the DOM directly that leads to much faster performance.
jQuery features will have to be done with pure or vanilla JavaScript code in Bootstrap 5.
Switch to Vanilla JavaScript
JavaScript is the programming language of the web. Most modern websites are powered by JavaScript and all modern web browsers on desktops, consoles, tablets, games and mobile phones include JavaScript interpreters, which makes JavaScript the most universal programming language in the world.
The removal of jQuery support in Bootstrap 5 gives way to writing efficient vanilla JavaScript code without worrying about the size or adding up any other non-essential functions.
Responsive Font Sizes
Bootstrap 5 will enable responsive font sizes by default , which will automatically resize the typography element according to the size of the user’s viewport through RFS engine or Responsive Font Sizes, instead of using media queries to solve typography common problems.
RFS is a unit resizing engine which was originally developed to resize font sizes. RFS offers the ability to resize basically every value for any CSS property with units, like margin, padding, border-radius or box-shadow, it is automatically calculates the appropriate font-size values based on the user’s screen size or viewport.
.title {
@include font-size(4rem);
}This will be compiled to this:
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}Drop Internet Explorer 10 and 11 Support
Internet Explorer doesn’t support modern JavaScript standards. In order to work with Internet Explorer, be it 10 or 11, JavaScript codes need to be compiled to ES5 instead of ES6, which increases the size of your projects up to 30%. This obviously limits your ability to use the features of ES6 . What’s even worse is it doesn’t support a lot of modern CSS properties which limits your modern web design potential.
In Bootstrap 5, the Bootstrap team decided to drop the support for Internet Explorer 10 and 11 which is a pretty good move as it will enable web designers and developers focus more on designing modern web pages without having to worry about breaking any piece of codes on old browsers or increasing the size of every project.
Change Gutter Width Unit of Measurement
Bootstrap has been using px for its gutter width for quite a long time which will no longer be the case in Bootstrap 5. According to the fixes made on Bootstrap 5, the gutter width will now be on rem instead of px.
Remove Card Decks
In Bootstrap 4, in order to set equal width and height cards that aren’t attached to one another, you need to use card decks.
In Bootstrap 5, the Bootstrap team removed the card decks since the new grid system offers more responsive control. Hence, removing unnecessary extra classes that can be solved via grid.
Navbar Optimization
In Bootstrap 4 they simplified this through the use of a nav or div HTML element and unordered list. The navbar class is the default class that always needs to appear on the component, also Bootstrap 4 uses inline-block on its display option.
But in Bootstrap 5 there are two large changes in navbar:
- Inline-block removed, and they used flex shorthand and removed the brand margin caused by requiring containers in navbars.
- Implement a dark dropdown via dropdown-menu-dark class that turns the dropdown into a black background which we usually see on navbar dropdown items.
Custom SVG Icon Library
In Bootstrap 5, there’s a large new SVG icon library created by Mark Otto, co-founder of Bootstrap.
It is free, high quality, open source icon library with nearly 1,200 icons. Include them anyway you like — SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.
Switching from Jekyll to Hugo
Jekyll is a free and open-source static site generator, used in WordPress, Joomla and Drupal, to build websites with easy to use navigation, website components and generates all the content at once. Jekyll basically provides page templates such as navigation and footers that will reflect on all of your web page.
Bootstrap 4 integrated with Jekyll through Sass (Syntactically Awesome Style Sheets), and we’ve reached two major issues with Jekyll over the years:
- Jekyll requires Ruby to be installed
- Site generation was very slow
So Bootstrap 5 switched to Hugo is described as “A Fast and Flexible Static Site Generator”. Similar to Jekyll, but written in Go language. A possible reason for the switch is that Hugo is lightning fast, easy to use and configurable. Compared with Jekyll, it has a great integration with the popular web host and can organize your content with any URL structure.
Class Updates
Bootstrap 4 has more than 1,500 CSS classes. There will be some CSS class that will no longer be available in Bootstrap 5, and some CSS class that will be added.
Some of the CSS classes that are already removed:
- form-row
- form-inline
- list-inline
- card-deck
Some new Bootstrap 5 CSS class added:
- gx-* classes control the horizontal/column gutter width
- gy-* classes control the vertical/row gutter width
- g-* classes control the horizontal & vertical gutter width
- row-cols-auto
RTL Support
So it is good to know that Bootstrap will now offer native support for RTL.
The RTL support has been built using RTLCSS, which is a project that helps existing LTR stylesheets to be converted into RTL.
Some of the highlights regarding the RTL support are:
- CSS Dist files now include a separate RTL based version (check out the dist files here)
- RTL Documentation to help you get started
- A couple of RTL based template examples
Is Bootstrap 5 ready to be used in production websites?
Not many changes are required to get Versoly working for Bootstrap 5 alpha1. The biggest issues for us would be the switch inputs and the new grid tier. We could most likely fix the switch issue at our end and notify the customer that the grid system has changed, we can switch to alpha4 or the beta.
If you’re working on a web app or a single website, it might be worth upgrading now with alpha1. The website will load faster and if you upgrade with each alpha release you will have less technical debt. You will need to check if there are any bugs you will encounter when upgrading.
Conclusion
With all the new updates coming in Bootstrap 5, it’s safe to say that the Bootstrap team is making huge steps to make the framework lightweight, simple, useful and faster for the developer’s benefit.
