Boostrap 4 vs Boostrap 5 :Should you move ? What are the differences?

Also Read: .com vs .net domain extension

Now, let's discuss each Bootstrap 4 vs Bootstrap 5 in details

1) Uses Vanilla Javascript instead of JQuery 🚀

Jquery is one of the most popular javascript frameworks of all time. It was created in 2006. When bootstrap was created in 2010, at that time jQuery was one of the best of the best Javascript Framework and no other framework was able to complete jQuery. So, thinking that bootstrap was created keeping JQuery as the backbone. But later different js framework like angular, vue, react came into light people do not like to use bootstrap because it heavily depends on jquery and people do not want to mix two js framework for building application. So, to be secure Boostrap 5 is completely remade using pure javascript. Doing so, it saves around 85 KB minified version of javascript🎉. And in my view, this is good from Google's perspective as well because Google started to keep page speed as a ranking factor, and not using jQuery and other frameworks improve performance.

Also, seriously, because of jQuery I haven't used bootstrap for making this sites as well.

According to Mark Otto, Founder of Bootstrap, they are trying to make this Future Friendly and faster javascript.

Also, bootstrap is mainly considered to be a CSS framework (not JS framework) so adding unnecessary jQuery is useless. Bootstrap 5 does not use jQuery and seems to be faster and lighter than the previous version.

Can we use Jquery with Bootstrap 5?

Ans: You can use Bootstrap 5 components with jquery.Which helps in a smooth transition for the user from Bootstrap 4 and Bootstrap 5.

2) Internet Explorer 10 and 11 Supports

Boostrap decided to drop supports for Internet Explorer because it just has around 3% market share. Also, Microsoft started to give more focus on Microsoft Edge Browser and recommend to use Edge Browser. For IE 10, Microsoft supports ends on 01/31/2020 and in near future, it ends for IE 11 on October 14, 2025. I believe, because of commercial deals with major business clients, Microsoft continues to offer internet explorer support. The main problem of Bootstrap was Internet Explorer but because of less market share, they stop supports for IE.

Also, Internet Explorer doesn't support any of the latest modern Javascript and CSS standards. So, we have to compile every Js code back to ES5 from ES6. Doing so, finally increases the project size.This is also the reason why Bootstrap 5 removed support for IE.

Bootstrap 5 (currently in Alpha) removes Internet Explorer 11 support, but you can easily add support back by adding a CSS file and many polyfills from JavaScript.(source )

3)Boostrap 4 vs Boostrap5: Enhanced Grid System

As we know bootstrap 4 and bootstrap 5 both use the GRID system for the layout design of the web page on various screen size and viewport.

Bootstrap 4 GRID System

<div class="container">
<div class="row">
<div class="col-xxl">// Place your content here</div>
</div>
</div>

4) Boostrap 4 vs Boostrap 5: Enhanced Icons and Fonts

Icons are one of the important parts of User Interfaces for websites and applications. In Bootstrap 4 we used to use external files for Icons as it lacks my own Icon Library. We used to use FontAwesome,freeicons, flaticons for icons. But in bootstrap 5, it has its own inbuild SVG based Icons so it can be used in both HTML and CSS pages as well as in the image tag. Boostrap 5 icons are open-sourced under MIT. These icons are developed in Figma and exported in SVG formats and have great looks.

Links for bootstrap 5 icons: click here.

Boostrap 5 is providing icons through npm as shown below:

npm install bootstrap-icons

Can we use Boostrap 4 without jQuery?

Ans: Yes we can use Boostrap without jQuery with limited features.

5) Bootstrap 4 vs Bootstrap 5: Shortname for Gutter

The space between the column (via padding) in the grid system is called the gutter. This padding is offset for the first column and last column in rows by a negative margin. Boostrap 5 comparatively uses a shorter name for the gutter. In bootstrap 4 uses gutter is my default 30px(left + right of column). But in bootstrap 5, the default gutter is 2 rem(left + right of column).

6) Form Elements: Boostrap 4 vs Bootstrap 5

Form elements in the form include dropdown, checkbox, radio button, text field, text area, and many more. In bootstrap 4 we have a browser and OS-dependent looks for those form elements but in bootstrap 5 has generic looks for all those form elements and is independent upon browsers and OS.

7) Bootstrap 4 vs Bootstrap 5: Responsive Font Size(RFS)

Responsive Font Size means as the viewport gets smaller, the font size will get smaller accordingly. Achieving this behavior in bootstrap 4 and earlier versions are very difficult. We used to use very hacks like using media queries and the calc method for making text font size responsive which seems to be tedious. This tedious work is solved in bootstrap 5 by adding default responsive font size.

8) Bootstrap 4 vs Bootstrap 5: Navbar Component Optimization

Navbar is an important part of Boostrap and in every website and application, it is used for making it more user friendly. And it seems to be more optimized in Bootstrap 5.

• inline-block property of navbar which is present in bootstrap 4 and is removed in bootstrap 5.
• Boostrap 4 has a white dropdown in the default navbar but bootstrap 5 has a black dropdown in the default navbar.

9) Boostrap 4 vs Boostrap 5: Card Desk Removed

In bootstrap 4, the card deck is used to create a card of equal height and width. This feature is removed in Bootstrap 5 because now bootstrap 5 has a more controlled responsive grid system that can be easily used to achieve such things.

10) Bootstrap 4 vs Bootstrap 5: CSS custom Properties

In bootstrap 4, the root variable is only available for color and fonts but in bootstrap, we can create custom CSS properties.

In bootstrap 4 using root variable

:root {
  --success: #66CD00;
}


.dropdown-menu > a:hover {
  color: var(--success);
}

Currently, Bootstrap 5 is in the alpha stage, no worries it will adopt more useful features soon.