Bootstrap, the most popular and widely used CSS framework to develop modern, dynamic, responsive interfaces for web pages, came up with a major update, i.e. Bootstrap 5. Bootstrap is well-known for its grid system and predefined components, which gives the ability to use codes instead of writing them from the scratch. The last Bootstrap update got us Flexbox, an improved grid system, and a lot of utility classes. With Bootstrap 5 in the picture, we can expect the following changes-
-
No jQuery
Bootstrap has been using jQuery since last year. But while using JS frameworks like Vue, reactjs, and angular, jQuery has been losing its popularity. Using/Downloading jQuery on the web application was not an ideal choice of developers considering its size and use in the application.
-
Switching to Vanilla JS:
Known as the universal programming language, Javascript is used in almost everything like the browser on desktops, tablets, games, and mobile phones. Unlike jQuery, which comes with the additional burden of unwanted functions and $object to the global scope, the user can write vanilla JavaScript code without worrying about the size or adding up other non-essential functions.
-
Bye Bye IE 10 and 11:
With bootstrap 5, bootstrap decided to drop support for Internet Explorer 10 and 11. Internet Explorer was always a pain for developers as they couldn’t use all the modern tools and features. With this change, developers can now focus on developing modern web applications without having to worry about breaking pieces of code on old browsers.
-
Responsive Font Sizes:
One of the most challenging parts is to manage responsive font sizes based on the viewport. Media queries have been a great tool to solve these typography problems. Developers can easily apply different font sizes for different devices based on their viewport using Media Queries. But with Bootstrap 5, the framework will enable us with the responsive font sizes by default. Bootstrap will automatically resize the typography elements using its ‘Responsive Font Sizes’ engine and render font sizes based on the device viewports.
-
Gutter Width Unit:
There are multiple ways with which we can use size or length units in CSS. Some of the most commonly used measurement units include px, em, rem, % vw, and vh. Bootstrap used to use px for its gutter width for quite a long time and finally, they are moving from it to rem (root em), which is equal to the calculated value of the font-size on the root element.
-
Remove Card Decks:
To set equal width and height of cards that aren’t attached, bootstrap used to have card deck (card-deck class). With Bootstrap 5, they have removed the card deck option as the new grid system has more responsive controls.
-
SVG Icon Library:
Bootstrap 5 is coming with a brand new SVG icon library that will remove all the dependency on 3rd party icon libraries.
-
Class Updates:
As always, every bootstrap version comes up with some new classes and removes a few-
List of removed classes:
form-row, form-inline, list-inline, card-deckList of newly added classes:
most of these classes are gutter related
g. g-, g-y, gx-
row-cols-auto
Conclusion
Reinventing the base HTML, JavaScript, and CSS continues to be one of the most frustrating experiences of every developer. While some do prefer writing codes, it is still viable to use an existing framework like Bootstrap and harness the benefits that come along. With all the new things coming in Bootstrap 5, it can’t be denied that the Bootstrap team is taking big steps to make the framework simple, lightweight, useful, and faster for the benefit of developers.
