Bootstrap is one of the most popular CSS framework which probably would have been used or come across by every web developer. Bootstrap 5 is going to be released soon. Let's see what is new in it and more about it.
Bootstrap, originally named Twitter Blueprint, was first developed for use by Twitter for its internal tools. On August 2011 this was renamed to Bootstrap and released to market as an open source project. It has large contributors base. It is licensed under MIT.
Bootstrap 4 is the current stable version released on January 2018 (it's alpha release was on August 2015, beta release on August 2017). Currently it is undergoing a major update as Bootstrap 5 which supports Material Design.
Bootstrap 5 alpha version was officially released on June 16,2020. You can checkout their official Github repostitory for issues, open questions, feedback and pull requests. There is no news from their end on its stable release till now.
Let us see what are the new features that are the added and also features dropped in Bootstrap 5
This is one of my favorite feature which bootstrap added to its new version. Until Bootsrap 4 though the website elements and grids acts as responsive to different screen sizes, there was no native support by Bootstrap for fonts also to be responsive.
This feature is enabled by default in Bootstrap 5 as per users viewport through RFS Engine. 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.Grid system improved with change in gutter width unit measurement
Until Bootstrap 4 the grid system uses "px" or "pixels" as a unit of measurement to measure the length/size of elements, this measurement relative to DPI and resolution of the viewing device and does not change based on any other element which does not suit for modern responsive design.
In Bootstrap 5 the gutter width measurement is 'rem' instead of 'px'. Rem stands for (root em). In most browsers 1rem default value is 16px.No Card Decks
The card-deck class which is used to to set equal width and height to cards is removed as the new grid system offers more responsive control.Navbar Optimisation
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.Dropped support for IE 10 and 11
In Bootstrap 3 developers got the advantage of 'Glyphicons' to use in their projects, but in Bootstrap 4 it was removed and hence developers need to rely on free icons like FontAwesome or Custom SVG icons.
Hurray! Bootstrap 5 there is well crafted new SVG icon library by Mark Otto, co-founder of Bootstrap.Switching from Jekyll to Hugo
Jekyll is a free open-source static site generator which was a great combination with Bootstrap until version 4. In Bootstrap 5 this functionality is switched to Hugo, because Hugo is lightning fast, easy to use and configurable. Hugo is also a static site generator built on Go language.Updated Classes
Bootstrap functionality is entirely depends on classes of elements. Bootstrap 4 has around 1500 CSS classes. In Bootstrap 5 some classes wer reomved and some new classes were added.
Here are some classes that are no longer supported in Boostrap5
Also see some new classes coming in Bootstrap 5
- gx-* classes control the horizontal/column gutter width
- gy-* classes control the vertical/row gutter width
- g-* classes control the horizontal & vertical gutter width
No doubt Bootstrap 5 is going to be a lighweight, simple, useful and faster CSS framework for the developers benefit. Thanks for reading this post.