Everything you should know about Bootstrap 5
Bootstrap is an open-source that helps with the website development and is open for use for everyone. It helps with designing responsive websites, has a modern interface, and appears professional.
Recently, it was upgraded to the Bootstrap 5 version. It launched Bootstrap 5 alpha in June 2020 after months of refining processes. But, the Bootstrap 5 development team informed that it is still in its alpha version. Therefore, the developers can expect breaking changes in the version until the first beta version is released.
With the release of Bootstrap 5, there are certain improvisations and updates that everyone should know about. Those are as follows:
- Removal of jQuery
- Responsive font size
- Elimination of internet explorer 10 and 11 support
- Changes in gutter width unit of measurement
- Elimination of card decks
- Navbar optimization
- A customized SVG icon library
- Switch from Jekyll to Hugo
- Class Updates
Let us understand each update in detail:
1. Removal of jQuery:
3. Responsive Font Size:
It is essential to have a website that offers a pleasing appearance on multiple devices and platforms. Media query is a great tool that solves typography issues. It helps set specific font sizes for specific viewing platforms. With Bootstrap 5 responsive font sizes will be present. It will automatically adjust the typography elements according to the user’s device using a responsive font size engine. This engine is also called the RFS engine.
4. Elimination of Internet Explorer 10 and 11 Support:
5. Changes in gutter width unit of Measurement:
CSS lays out various ways to specific sizes or lengths of elements through multiple measurement metrics. Among these metrics, the popularly used metric is PX known as a pixel. Bootstrap uses PX to specify the gutter width for a long time. But with the launch of the bootstrap 5 update, this parameter will be replaced by rem. Rem means “root em”. This means equal to the calculated value of font size on the root element.
6. Elimination of Card Decks:
While using bootstrap 4 the developers were using width and height cards to set equal parameters while they were disconnected from each other. With bootstrap 5 the team has eliminated the card decks as the new grade system provides increased responsive control. Therefore you can solve the issue of unnecessary extra classes using a grid.
7. Navbar Optimization:
This component happens to be a very important part of bootstrap that the developers used almost all the time. In previous versions of bootstrap, you required a significant amount of markup to help it function better. In bootstrap 4, the development team simplifies the process using a nav or div HTML element. Bootstrap 4 also used inline-block for the display option but bootstrap 5 removed it. Apart from this, they have included a dark dropdown using a dropdown-menu-dark-class that changes the drop down into a black background.
8. Customized SVG icon Library:
Bootstrap 3 provided about 250 reusable icon components which were known as “Glyphicons”. They offer iconography, to input groups alert drop dance, and other bootstrap elements. However, bootstrap 4 completely scrapped it and developers started using free icons. But a brand new SVG icon library was launched in bootstrap 5. Mark Otto, the co-founder of bootstrap, has created this library.
9. Switch from Jekyll to Hugo:
Jekyll is a free, open-source static website builder. If a developer knows how WordPress, Joomla Drupal function, then it becomes easy to work with Jekyll. Jekyll helps build websites that have easy navigation and website elements. It is also known to generate all the content in one go. Bootstrap 4 integrated well with Jekyll using syntactically awesome style sheets (Sass). With the launch of bootstrap 5, the framework has switched from Jekyll to Hugo. Hugo is “a fast and flexible static site generator built by spf13 in GoLang.” The reason behind the switch is Hugo’s lightning-fast and easy-to-use configuration.
10. Class Updates:
Bootstrap 5 has retained CSS classes. Without them, bootstrap will render uninteresting. Bootstrap 4 has over 1500 CSS classes. But with the launch of bootstrap 5, some classes have faced elimination. According to the GitHub project tracking board, they are as follows:
The classes that are added in the Bootstrap 5 are:
- gx-* classes will manage the horizontal/column gutter width measurements
- gy-* classes will handle the vertical/row gutter width
- g-* classes will control the horizontal/vertical gutter width