Bootstrap 5 has released on June 16, 2020. It introduces more changes which will cover in this blog. So let's talk about bootstrap 5 10 most major improvement.
Bootstrap 5
Bootstrap is the CSS framework which was developed for making responsive and mobile-first website. In bootstrap, many predefined classes are present which help to design a responsive website quickly by using some classes. Bootstrap have may feature like grid system which helps to make a responsive website, predefined buttons, navigation bar, modules, tables, alert message etc. that makes more reliable and easy to use. Now on 16 June 2020, the new version of Bootstrap is introduce called Bootstrap 5.
In Bootstrap 5 is now under alpha testing that means some other changes will come. But at that time 10 most major improvement of Bootstrap 5 are described below.
1. Jquery remove
The first most major changes were to remove Jquery. In Bootstrap 4 and old version Jquery play a major role in all the function like drop-down menu, collapse Navbar etc. But some fresher have the problem Jquery because after some knowledge in Jquery then they go to read Bootstrap to better understand. For that reason many skip Bootstrap. But now Bootstrap 5 completely free of Jquery and all the function or action are performed using vanilla JavaScript.
2. Responsive font sizes(RFS)
Bootstrap 5 comes with responsive font sizes that mean it will compress or decompress their width and height according to the screen and that makes easy to use the font in the website. In past, we need media query to control our font for the big screen to the small screen and that makes frustrated. So it will solve in Bootstrap 5.
3. Drop support for internet explorer 10 and 11
IE is major browser in 2003 but now it is nightmare of the web designer since it doesn't support modern JavaScript standard JavaScript code is compiled ES 5 instead of ES 6 which increase the site of project 30%. This limit our feature of JavaScript. For that reason, it will no longer use in modern website design so it will remove.
4. New gutter width
In CSS, we have a variety of ways to measure the size of the width and height of elements like em, rem, pixel, percentage,vw,vh. Bootstrap use pixel for its gutter width but in Bootstrap 5 the size of a gutter in the measure in rem instead of pixel.
5. Navbar optimization
In Navbar, some classes are change like to black drop-down menu we simply use drop-down-menu-dark. This type of changes is made to optimize the Navbar.
6. Custom SVG icon library
In Bootstrap 3, some SVG icon is introduced to use instant icon without going to third-party provider but in Bootstrap 4 it will remove and we use SVG icon form outside the bootstrap but Now it will come with some SVG maybe it increase in future.
7. Shift from Jekyll to Hugo
Bootstrap 4 is built-in Jekyll but now Bootstrap 5 documentation is made in Hugo. Hugo is the static site generator for fast and flexible. Previous version of Bootstrap documentation is made using Jekyll.
8. Card component removed
The card is a component present in Bootstrap 4 which is used to create a card like structure with some image below some description. But now it will remove.
9. Updated classes
Bootstrap 4 had more than 1500 predefined class but now some classes are added and some are removed like
- -form-row
- -form-inline
- -list-inline
- -card-deck
10. Enhance the grid system
Grid in Bootstrap play a important role to create a responsive website. In new Bootstrap 5 some classes and position are changes.
- Added a new grid to XXL
- .gutter classes have been replaced with .g* utilities
- Form Layout option have been replaced with the new grid system
- New classes of vertical spacing have been added
- No longer position: relative for columns.
Conclusion
Bootstrap 5 is under development to be precise it is on alpha testing. Many changes will be come in the future. So at that time we only test the Bootstrap don't be use in our project before the full flex release of Bootstrap 5.
Tags:
blog