Contact Us

Contact Us



Pleas confirm by checkbox


Web Development

Bootstrap 5 is Here: What’s New for Us

Author_img
By Ritesh Gupta September 14, 2020

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-deck

    List 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.

Related posts
Lite Sites & Apps with “Prefers Reduced Data”
Web Development

Lite Sites & Apps with “Prefers Reduced Data”

By namrata.gupta February 10, 2021
Fluid Typography with Clamp: Usage and Benefits
Web Development

Fluid Typography with Clamp: Usage and Benefits

By namrata.gupta October 12, 2020
What's new in Node-Data 2.0
Scalability

What's new in Node-Data 2.0

By namrata.gupta December 30, 2017
Comparing productivity of node.js frameworks
Project Management

Comparing productivity of node.js frameworks

By namrata.gupta December 29, 2017
Comparing performance of node.js frameworks
Scalability

Comparing performance of node.js frameworks

By namrata.gupta December 29, 2017
SonarQube - PHP Project - Ubuntu
Technical

SonarQube - PHP Project - Ubuntu

By namrata.gupta March 29, 2016
Part 2: Building web app using react.js, express.js, node.js, and mongodb
Technical

Part 2: Building web app using react.js, express.js, node.js, and mongodb

By namrata.gupta February 02, 2016
Part 1: Building web app using react.js, express.js, node.js and mongodb
Technical

Part 1: Building web app using react.js, express.js, node.js and mongodb

By namrata.gupta January 19, 2016
Prototypal Inheritance in JavaScript
Technical

Prototypal Inheritance in JavaScript

By namrata.gupta October 03, 2015
Getting started with TypeScript in AngularJS application
Technical

Getting started with TypeScript in AngularJS application

By namrata.gupta August 12, 2015

Stay updated

Get the latest creative news from Fubiz about art, design and pop-culture.