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


👤 Diwas Poudel    🕒 Sep 25 2020    📁 Fix    📜 0 comment

Table of Content

Before discussing Boostrap 4 vs Boostrap 5 let's discuss what is Bootstrap? Bootstrap is a free and open-source HTML CSS and JS framework used for developing responsive and mobile-first websites and web applications. It is called a front-end framework. This framework is developed by twitter with the initial release on August 19, 2011.

Some common advantages of using any bootstrap version:


1)Support responsive design so does automatically adapt to different screen sizes.
2) Saves a lot of development time by helping to develop responsive websites design quickly
3) Consistency throughout the web browser.
4) Bootstrap can be customizable
5) Excellent Documentation(https://getbootstrap.com/).
6) Large online community supports.

Also Read : .com vs .co 


There are various major and minor versions of bootstrap released but in this article, I want to discuss Bootstrap 4 and bootstrap 5.

https://i.pinimg.com/564x/75/33/15/75331580630c2ca33073260a580c7998.jpg

Boostrap 4

Bootstrap 4 was released on October 29. 2014 and finalized on January 19, 2018. It is the successor of Bootstrap 3.

Learn Bootstrap 4

Boostrap 5

Bootstrap 5 framework was released on 16th June 2020

Boostrap 5 = Boostrap 4 + New Updates and Some Changes.

Learn Bootstrap 5

Bootstrap 5 Github Link: click here

Before discussing the features of bootstrap 5 let's look different between them.

Bootstrap 4 vs Bootstrap 5 

Based on Boostrap 4 Boostrap 5
Grid System It has 5 default responsive tiers namely xs, sm, md, lg, xl. It has 6 default responsive tiers namely xs, sm, md, lg, xl, xxl
Javascript/Jquery It depends on Jquery and has to use jquery before using bootstrap. It has removed jquery and used pure Vanilla Javascript.
Internet Explorer Support It does not support IE8 and IE9 but supports IE10 and IE11 It even drops supports for IE10 and IE11
Color  It has limited color supports. It supports extra color with an expanded color palette.
Fonts and Font size Responsive font size is not by default Responsive font size enabled by default allowing to scale text responsively in all viewports and devices
Form Elements Some form element like a radio button, dropdown, switches, checkbox looks different on different OS and browser. All form element has consistent looks in all OS and browser.
Gutter It uses .glutter with font size in px. Default : 30 px It uses .g* with font size in rem. Default 2rem. Has more control on gutter width.
CSS Custom Properties  and Variable Has no custom properties for components, layout options such as table components It has added CSS Custom Properties for components and layout options.
Vertical Spacing Classes Has no vertical spacing classes. It has vertical classes for spacing.
Utilities API and Helpers We cannot modify Ultities classes in bootstrap. We can create our own classes and own styles while designing projects using Utility API (SASS based tools for generating utility classes)
Positioning Column supports position: relative Column no longer supports position: relative by default
Boostrap Icon No icon for the bootstrap library. It has its own icon library. Uses SVG icons
Jumbotron Supports It uses Jumbotron It doesn't have a Jumbotron
Card Desks It has a card deck(Used to create a grid of card with equal height and width). Card Decks is removed as a grid in bootstrap 5 provides more responsive control.
form-row It has form row classes with the small gutter. It has no form-row classes and this supports by gutter classes.
Navbar    
Static Site Generator Boostrap 4 uses Jekyll which is a static site generator. Boostrap5 uses Hugo, which is lightning fast, easy to use, and configure a Static Site Generator.
Tutorial URL https://getbootstrap.com/ https://v5.getbootstrap.com/


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.

https://i.ibb.co/xMW1C7q/vanilla-js.jpg

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

Breakpoint Class Prefix Dimension
Extra-Small None (auto) 0 - 576 px
Small sm ≥ 576px
Medium md ≥ 768px
Large lg ≥ 992px
Extra Large xl ≥ 1200px
Extra Extra Large xxl ≥ 1400 px    ( Added in Bootstrap 5)

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