Hi guys, welcome to TechArena360.com, in this article, we will be understanding some of the changes that are coming in Bootstrap 5  release. we'll look into what's new, what's different, and what is removed. I have gathered all the resources that I could help you understand the changes in Bootstrap 5.

Bootstrap 5: What's new and What's Changed?

At this point in time, bootstrap is currently in version 5 Alpha 1 Let's Keep in mind that it is still in the Alpha Stage and there may be some changes and editions with the framework by the time of stable release. Bootstrap has been out for such a long period of time that it is more than probably 8 years now. it is also the most used CSS Framework in the world. it powers roughly 18 million websites worldwide. so let's discuss what's expected to change in the upcoming release of Bootstrap.

Brand new logo

First of all, they have a brand new logo that reflects the feeling of a ruleset. style bounded by curly braces. it looks much more beautiful and better than before which is great!

Goodbye JQuery

JQuery is now removed from Bootstrap. yes! you heard it right, Bootstrap Won’t be using jquery after all these years which was around more than 8 years now. The JQuery has become a large bloated library that requires more time to load. As javascript frameworks like angular, react, Vue has now dominated the web. so any jquery features have been completely removed and can be done via vanilla Javascript code in Bootstrap 5.  which helps us in file size or weight of the framework and make it much lighter.

Responsive font sizes

It was a bit tricky to handle typography on multiple platforms, media queries were a great help to achieve this. but now Bootstrap 5 has enabled responsive font sizes. by default, it will automatically check and resize typography according to the browser's width. Now it's a lot easier to handle responsive typography as it's all done by its Responsive Font resize engine.

Dropped support for internet explorer 10 and 11

Back then around 2003, IE was a really Major and Popular browser and it was adapting and getting a lot of users around 95 percent of users overall. but today it has become one of the web designers' nightmares since it doesn't support modern Javascript standards. Javascript code needed to be compiled to ES5 instead of ES6 which increases the size of projects up to 30%.  this limited our ability to use the features of ES6 or anything newer javascript standards. and moreover, it doesn't support a lot of moral CSS properties at all.  so now it's really great that we don't have to think about old IE Compatibilities anymore

new gutter width for measurement

With CSS we have a variety of ways to specify sizes or lengths of elements using different measurements like EM, REM,Pixels(px),Percentage(%),Viewport width(VW), viewport height(VH). Bootstrap has been using pixels for its gutter width. but now in Bootstrap 5 the gutter width will be measured using REM instead of pixels.  REM is an Abbreviation used for root EM that means equal to the calculated value of font size on the root element. This is also one of the well-made improvements from the Bootstrap Team.

Navbar Optimisations

The navbar has also been optimized and they completely removed it. Now we can use the dark drop down by drop-down menu dark class which turns the drop-down menu in the black background. This is also a useful improvement that we can see in the navbar dropdown items as well.

Custom SVG icons

in bootstrap 3 there were around 250 reusable icons in a format called cliff icons. However, in Bootstrap 4 it was totally taken off or removed and we had to rely on the free icon sources. but now in bootstrap, we have a free and totally open source SVG Icon library. These icons can now be added and used in our project at any moment of time.

Card Component is Removed

In Bootstrap 4 we had pre-made components on the left-hand side. This was really helpful in creating cards to set equal width and height of the cards. but now it' has been removed and we no longer can see it in the dock.

New Grid System

We have a new grid system.  which gives us more control over responsiveness. Use of these unnecessary extra classes can be solved by the use of grids. this a good improvement for developers looking for Responsive UI development.

Updated classes 

Bootstrap 4 had more than 1500 predefined classes. Now in Bootstrap 5, we have few editions to the classes and some of them are removed as well. The removed classes are form row, Form inline, card deck, etc. Added classes are ZX and utility.

Enhanced grid system. 

There has been some improvement in the grid system. How it was used before in version 4. Now it's. Lots more improved a lot. some noticeable changes in grids are added to the new grid 2XXL.
.Gutter classes have been replaced with .G  form layout option has also been replaced with a new grid system. new classes of vertical spacing have also been added and we no longer have position: relative for columns by default.


conclusion

There is a lot more to come according to Github roadmap documentation to do’s and pull requests there are a lot more improvements to come some of them are the implementation of canvas menu, changes to SASS modal system, increased uses of CSS custom properties, embedding SVG into hour HTML instead of our CSS and there is are a ton of new things yet to come.

What you guys think about Bootstrap 5? do let me know in the comments below. I would love to read them. for now, be safe, be happy, And stay healthy :)