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
- Dropped JQuery support and switched to Vanilla JavaScript
- Font sizes will also be responsive
- Grid system improved with change in gutter width unit measurement
- No Card Decks
- Navbar Optimisation
- Dropped support for IE 10 and 11
- Introduced own custom SVG icons library
- Switching from Jekyll to Hugo
- Updated Classes
Drop JQuery support and switch to Vanilla JavaScript
JQuery is an efficient language for web scripting which allows you to access all elements in a page update its appearance and content, responds to user inputs etc.. across all browser platforms. AJAX is one of the popular feature to refresh just the content you need. Bootstrap has been using JQuery from past 8 years, it has become a large bloated framework which should be downloaded on websites that uses Bootstrap framework and may not be used by other plugins. Hence this overhead was removed and furher querying feature will have to be done with Vanilla JavaScript.
Responsive Font Sizes
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
The drawback with this browser versions are they don't support modern JavaScript standards. Hence, for developers to make their application compatible with this browser the code size increases considerably. To overcome this difficulty Bootstrap team decided to drop their support for these browsers.
Introduced own custom SVG icons library
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
- form-row
- form-inline
- list-inline
card-deck
Also see some new classes coming in Bootstrap 5gx-* 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
Conclusion
No doubt Bootstrap 5 is going to be a lighweight, simple, useful and faster CSS framework for the developers benefit.
Top comments (0)