From the time it burst on to the screen in 2011, Bootstrap remains a very well-known open-source CSS framework to swiftly develop contemporary, responsive, and flexible websites and applications. The newest superior avatar of the framework is 4.5.2, and the Bootstrap has unleashed its newest beast called Bootstrap 5.
After a lot of work on its features, the Bootstrap team finally showcased the first alpha version of the eagerly awaited Bootstrap 5. There are several changes yet to arrive,Bootstrap 5 Alpha offers us a feel of the all new features and enhancement to expect in the upcoming version. Let’s explore in detail the new things making their way into Bootstrap 5.
Bootstrap 5 New Features and Highlights
Like any other major release, expect a lot of modifications in Bootstrap 5. So, let us focus on the changes and fresh arrival in the new version of Bootstrap.
Freshness Galore
The docs pages of Bootstrap 5 are not full-width any more. This modification was done to:
Render a new look and feel to the Bootstrap site.
Enhance readability.
Take the dominant app characteristics from a website and make it more content-like.
Also, it is receiving an excellent new logo influenced by the CSS. In the new logo the alphabet ‘B’ is a rounded square tied by entwined braces.
These alterations have been made to ‘Blog’ and ‘Icons’ sections, these can be seen in other website zones in future.
#Switching from jQuery to Vanilla JavaScript
For the last nine years, Bootstrap was fully extracting jQuery’s power to provide incredible features such as drop downs, carousel, menu expansion, etc. in their websites and applications. But, the entry of contemporary JavaScript frameworks such as Angular, Vue, and React, has prompted the Bootstrap team to remove jQuery as a dependency from version 5.
Rather, Bootstrap 5 depends on unadulterated vanilla JavaScript to provide behaviors such as popover, slider, dropdown, etc. Resultantly, projects developed on version 5 are very much lightweight and quicker, with better control and upkeep over your code. The proverbial icing on the cake is that you can still utilize jQuery if your project depends on it.
This has to be a game-changing modification effected in the framework in the last few years, rendering Bootstrap a perfectly chiseled out framework that merges with contemporary JavaScript-oriented frameworks.
Intuitive Font Sizes
Devising a website with mesmerizing looks on several viewports can be very challenging for some developers. To enhance readability on diverse viewports, you presently have to manually specify particular font sizes for a certain viewport using media queries.
To ensure that the process becomes convenient, the new version of Bootstrap will be having responsive font sizes automatically. This helps resize the typography elements on its own as per the user’s viewport via Bootstrap’s side project, RFS engine.
No Assistance for Internet Explorer
This happens to be a major shift after jQuery. There won’t be any assistance to Internet Explorer as Microsoft is totally focussed on Edge browser, which is based on Google’s open-source Chromium engine. Also, Internet Explorer has lost its relevance to present day web development technologies as it doesn’t support existing JavaScript standards. Resultantly, web designers and developers can totally concentrate on developing modern web pages instead of fretting over breaking any code on older browsers’ versions.
Enhanced Grid System
Bootstrap 5 rests on top of the current grid system. Rather than doing away with the present grid system and bringing in something totally new, the Bootstrap team has had various enhancements to it, to enable everyone to upgrade to the new version smoothly.
An overview of what’s new in the Bootstrap 5 grid system:
A fresh extra-extra-large (xxl) grid tier for resolutions ≥1400px.
.g* utilities replace .gutter classes, similar to padding/margin utilities.
The new grid system takes down the form layout options.
Inclusion of vertical spacing classes.
By default, columns do not have position: relative.
Do Away with Card Decks
Usually Bootstrap developers are required to write heavy-duty code to make cards with equal widths and heights, which aren’t attached. This takes a lot of time, so no longer there in Bootstrap 5. The new version eliminates the card decks as it provides more responsive control with the improved grid system.
Navbar Optimization
The Navbar element is an integral aspect of Bootstrap, which are commonly used by developers. Bootstrap 5 optimizes the navbar by:
Eliminating unwanted display: inline-block from Flex child components
Taking down line-height: inherit;
Incorporating a default “container” element to the navbar
Also, the Bootstrap team has executed a dark dropdown through dropdown-menu-dark class, which converts the dropdown menu into a black background.
Custom SVG Icon Library
Bootstrap 5 launches new, independent, and open-source SVG icon library created skillfully by the co-founder of the framework himself. This means you no longer have to utilize third-party icon libraries such as Material Icons or Font Awesome.
As these icons can be accessed as a different package, you can utilize them in your projects prior to the official launch of Bootstrap 5.
Moving from Jekyll to Hugo
Bootstrap was utilizing Jekyll as its documentation static site generator from the beginning. But, in the past few years, Hugo has become the quickest and most dynamic static site generator.
Considering the fact that Jekyll needs the Ruby installation and provides a slow static site generation, the Bootstrap team has made a switch from Jekyll to Hugo in version 5. Written in Go language, Hugo entails zilch external runtime dependencies and is very quicker than Jekyll.
CSS Custom Properties
Bootstrap 5 presently permits you to utilize CSS custom properties. As there were just a few root variables unleashed for color and fonts in version 4, the new version makes them available in various elements and layout options. This implies that you can define and reuse values for styling. As a result, your theme development experience will be enhanced a lot. Bootstrap 5 intends to nurture both Sass and CSS custom properties’ abilities to turn the framework even more flexible for developers.
Optimized Forms
Bootstrap 5 brings a disparate, committed section for Forms documentation and elements. The chief intent of this step is to provide all kind of forms they deserve. Together the new section, they have refurbished all of Bootstrap’s form controls. Dissimilar to releasing custom form controls in version 4, they’ve turned totally custom in Bootstrap 5.
A Fresh, Useful API
The fresh avatar of Bootstrap contains a brand new utility API to take down or alter the default utility classes. The new API is akin to the utility-first CSS framework Tailwind CSS. It brings a universe of prospects to make utility classes for sizing, spacing, positioning, etc.