The alpha version of the much-awaited Bootstrap 5 framework was released on 16th June 2020 after several refinements. In fact, it took approximately 2 years to get the alpha version of the framework released. Although there are no solid leads on when the stable version of Bootstrap 5 will be released, it is expected to happen before the end of 2020.
Following are some of the changes in Bootstrap 5:
- jQuery Dependency Removed
- Support Dropped For Internet Explorer 10 & 11
- New Look and Feel
- Enhanced Grid System
- Responsive Font Size (RFS)
- Card Decks Removed
- Custom SVG Icon Library
- CSS Class Updates
1. jQuery Dependency Removed:
Bootstrap 5 has no more dependency on jQuery. Huge changes to the core bootstrap Javascript file is expected as jQuery will no longer be part of the project.
2. Support Dropped For Internet Explorer 10 & 11 :
In Bootstrap 5, the Bootstrap team decided to drop the support for Internet Explorer which is a welcoming move. It will help web designers and developers to focus more on designing modern web pages without having to worry about IE browser compatibility. However there will be workarounds to make it work in IE.
3. New Look And Feel:
In Bootstrap 5, few old design elements are removed and few new elements has been introduced. The color palette has also been expanded in v5. With an extensive color system built-in, you can more easily customize the look and feel of your app without ever leaving the code base.
4. Enhanced Grid System:
There are few changes in grid system.
- A new grid tier
xxlhas been introduced. .gutterclasses have been replaced with.g*utilities, much like margin/padding utilities.- Form layout options have been replaced with the new grid system.
- Vertical spacing classes have been added.
- Columns are no longer
position: relativeby default.
5. Responsive Font Size:
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.
RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like margin, padding, border-radius or even box-shadow.
Ref: https://github.com/twbs/rfs
6. Card Decks Removed:
In Bootstrap 5, the Bootstrap team has removed the card decks since the new grid system offers more responsive control.
7. Custom SVG Icon Library:
In Bootstrap 4, the default integrated icon library Glyphicon was totally scrapped and web designers and developers needed to rely on free icon libraries like Font Awesome or use their own custom SVG icons in order to meet icon requirements in their designs. Fortunately, with the 5th version there’s a brand new SVG powered icon library coming created by Mark Otto. For the first time ever, Bootstrap has its own SVG icon library and it will be available for any project soon.
8. CSS Class Updates:
Regarding the CSS there are no major changes. Few CSS classes will no longer be available in the new version (form-row, form-inline, list-inline, card-deck, gutter) and some new CSS classes are introduced. The .gutter class has been replaced with .g* utility classes (.gx-*, .gy-*, .g-*). The row-cols-auto class is also a new addition.