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.

Bootstrap is originally a blend of CSS and JavaScript code that you can use to create dynamic websites. It is an efficient tool for front-end design that consists of HTML and CSS design templates.

1. Removal of jQuery:
jQuery offers a general-purpose abstraction layer for web scripting that is efficient for any web development. It is extensible hence allows you to access elements in a document without a lot of JavaScript coding. Bootstrap has been using jQuery for over 8 years. But jQuery has become a bloated framework where it requires the websites to download. Any jQuery query features are eliminated and have been replaced with vanilla JavaScript code in bootstrap 5. This helps significantly in handling the file size or weight of the framework.

2. Switching to Vanilla JavaScript:
When it comes to web development JavaScript is the basic programming language. Significantly a huge number of websites are powered by JavaScript. They all run on modern browsers through various devices. This makes JavaScript a universal programming language. But with Bootstrap 5 jQuery has been removed. Therefore the developers can write Vanilla JavaScript code without bothering about the size of the functions.

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:
In 1995, Microsoft launched internet explorer which changed the way users accessed the internet. Coming to 2020, IE does not hold any relevance with Chrome, Firefox, and other major web browsers. JavaScript code required compilation to ES5 instead of ES6. The size of the project because of his shoots up to 30%. This limits the use of modern JavaScript standards. The bootstrap team decided to drop this support for IE 10 and 11. Therefore, the developers working with bootstrap 5 don’t have to worry about changing the code to accommodate old browsers.

5. Changes in gutter width unit of Measurement:
Bootstrap 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.

Conclusion:
The most difficult thing to do for a developer is to create the base HTML, CSS, and JavaScript for every project. Although some developers are writing their code, it still seems meaningful to use an existing framework like Bootstrap. Looking at the bootstrap 5 updates, it seems evident that the bootstrap team is making huge changes to keep the framework light, simple, and fast.

Source: https://www.zenesys.com/blog/everything-you-should-know-about-bootstrap-5