Bootstrap, the most popular open-source CSS framework has released Bootstrap 5 beta. Now it has become a popular topic of discussion in the developer community. Let us follow up on the new features of the much-awaited frontend toolkit.
# New Look & Feel
With the new curly braced logo, the developers have brought an updated look in their Bootstrap 5. The following changes are available:
- Removed full-width from the doc pages to improve readability.
- Expanded the version 4 theming page
- Starter npm project
- Expanded built-in color system.
# JavaScript (No More JQuery)
With Bootstrap 5, the developers decided to drop jQuery. Now it will be easier to use React or Vue with Bootstrap. The file size and page loading have reduced drastically due to no dependency on JQuery. Popper.js version 2 has been implemented with some minor changes in tooltips and popovers. ES modules can be used to import Bootstrap components modularly as needed. The data-bs-* attribute will enable the JavaScript behavior in Bootstrap 5.
# No Support for IE
Internet explorer support has been dropped with Bootstrap 5. Now the modern features such as CSS properties, faster JavaScript, and better APIs can be used.
# CSS
Bootstrap 5 included CSS variables for component and layout options. Previously only root variables were available for color and fonts. Following a table component CSS:
- RTL
The RTL will now support the right to left languages such as Arabic, Persian, and Japanese. The left and right concepts have been replaced with start and end.
- Positioning
In addition to existing position classes; top, start, end, and bottom classes are added for 0%, 50%, and 100%.
- Grid System
Bootstrap 5 is built on the existing grid system. Here is a rundown of the newly enhanced grid system:
- XXL grid tier for resolutions >=1400px
- .g* replaced gutter classes
- Vertical spacing classes
# Utility API
With the new SASS-based Utility API, creating our custom or adding other CSS utilities with Sass syntax is possible now. We can also modify or remove the existing properties when needed.
# Optimized Forms
Bootstrap 5 introduced a separate and customized section for documentation and components. Unlike version 4, they’ve gone fully custom in Bootstrap 5 with their form controls. Every checkbox, radio, select, range appears more custom in style and behavior across all OS and browser.
# SVG Icon Library
Bootstrap 5 now offers an SVG library of 1000+ icons. A web font version will be added in the stable release.
Some other notable upgrades of Bootstrap 5:
- The static documentation site has switched to Jekyll making it faster than before.
- Optimized navbar
- Responsive font sizes with RFS engine
- Removed version 4 card decks system
With the new updates, the team is undoubtedly taking a huge step to make the framework lightweight, simple, useful, and faster to the developer’s advantage. Soon with the stable release, once again developers will fall in love with Bootstrap. (January, 2021)
