Bootstrap is an open-source front-end framework, which is also one of the widely used front-end development frameworks in all over the world. Since last 8 years, it has been evolving with better features and functionalities.
Let us discuss some more about what is new in Bootstrap 5 and how it is different from the past version(s).
Before start, keep in mind that the current version of Bootstrap 5 is still in the alpha stage and there is coming in the future.
It is not a totally new Avatar but Bootstrap has launched New logo and also made some changes in documentation and webpage style. The doc. Pages are no longer full width and they redesigned it to improve readability. The sidebar is also powered by their own plugin called Collapse plugin, which is used for expandable sections for faster navigation.
As we, all know it is hard to manage typography manually. Developers need to manage the font size using CSS while Bootstrap is specially developed for those who do not want to work more on CSS and JS manually. This new features in bootstrap automatically check and resize the fonts accordingly in a responsive environment.
With CSS we have a verity of ways of specifying sizes or lengths of elements using different measurement styles. Bootstraps has been using pixels for measuring gutter. But in Bootstrap 5 the Gutter width will be measuring using REM instead of pixel.
You can use Dark drop down via dropdown-menu-dark utility class. By default, Bootstrap 4 uses inline-block on its display option but in Bootstrap 5, it was removed. They also used flex shorthand and removed the brand margin caused by requiring containers in navbars. Aside from this, they have also implemented a dark dropdown via dropdown-menu-dark class that turns the dropdown into a black background, which we usually see on navbar dropdown items.
In bootstrap 4, there were around 250 reusable icons while in Bootstrap 5 all of them are taken off and you need to relay of custom icons. Now in Bootstrap 5, we have totally free and open source SVG icon library. These icons can be added into your project at any moment of time (https://icons.getbootstrap.com/)
Bootstrap was built-in Jekyll but now bootstrap 5 documentation is made with Hugo. It is a static site generator, which is a fast, and quick static site generator written in the Go language. A possible reason of switching to Hugo is it is fast, easy to use and configurable with Jekyll. It has also great integration with popular WebHost and can organize our content with any URL structure as well.
In Bootstrap there was a feature where we can set the equal width and height of the card. But now it has been removed since we have new grid system which also has more control over responsiveness, this unnecessary extra class is solved with the use of grids.
In bootstrap 4 there are more than 1500 different classes but now in bootstrap 5 we have a few additional classes and some of the existing classes are also removed as well.
The removed classes are,
Newly added classes are,
They have added a new grid tier! Say hello to xxl. The existing .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. They have also added options to your grid gutter spacing that matches the spacing utilities. Form layout options have been replaced with the new grid system. Vertical spacing classes have been added. Columns are no longer position: relative by default.
There is still better improvements that are coming in the upcoming stable release which may release in the upcoming spring. Thanks to bootstrap team working hard in making ready to ship code to make it lightweight, simple, useful, fast, and ultimately enhanced the developer experience overall.
Rahul Panchal is a Founder and Managing Director of Rlogical Techsoft Pvt. Ltd, a web & mobile app development company India specialized in Hybrid, Native, Android and iOS App development.
600 E Michigan Ave, Kalamazoo, MI 49007, USA
5 Kew Road, TW9 2PR, London
Peter Klein: +44 753 859 8026
Contact Email: email@example.com
301 1-28-21 Hayabuchi, Tsuzuki-ku, Yokohama-shi, Kanagawa 224-0025, Japan
Contact Email: firstname.lastname@example.org
Suit 3, Level 27, 1 Farrer Place Sydney NSW 2000
Contact Email: email@example.com