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

👤 Diwas Poudel 🕒 19 Nov 2022 📁 TECH

Before we get into the Boostrap 4 vs Boostrap 5 debate, let's first define Bootstrap. Bootstrap is a free and open-source HTML CSS and JS framework that is used to create responsive and mobile-first websites and web applications. It's known as a front-end framework. Twitter created this framework, which was first released on August 19, 2011.

Some common advantages of using any bootstrap version:

Support responsive design so does automatically adapts to different screen sizes.
Saves a lot of development time by helping to develop responsive websites design quickly
Consistency throughout the web browser.
Bootstrap can be customizable
Excellent Documentation(https://getbootstrap.com/).
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.

Boostrap 4

Bootstrap 4 was first released on October 29, 2014, and it was completed on January 19, 2018. It is the replacement for Bootstrap 3.

Learn Bootstrap 4

Boostrap 5

On June 16, 2020, the Bootstrap 5 framework was released. It is no longer in beta and is no longer available.

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

Learn Bootstrap 5

Bootstrap 5 Github Link: click here

Start by installing the latest bootstrap 5 with npm:

npm i bootstrap@next

Bootstrap 4 vs Bootstrap 5
Bootstrap 4 vs Bootstrap 5 Explanation
Should we move to Bootstrap 5?

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 cards 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 a 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 detail.

If you want to migrate from Bootstrap 4 to bootstrap 5 we have to know the below differences.

Bootstrap 4 vs Bootstrap 5 Explanation

1 Uses Vanilla Javascript instead of JQuery 🚀

Jquery is one of the most well-known javascript frameworks. It was founded in 2006. When Bootstrap was created in 2010, jQuery was one of the best Javascript Frameworks available, and no other framework could compete with it. As a result, it is reasonable to believe that bootstrap was developed with JQuery as its foundation. However, as different js frameworks such as angular, vue, and react came to light, people disliked using bootstrap because it relied heavily on jquery and people did not want to mix two js frameworks for building applications.

To be safe, Boostrap 5 has been completely rewritten in pure javascript. This saves approximately 85 KB by using a 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 improves performance.

Also, seriously, because of jQuery I haven't used bootstrap for making these 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 using 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 support 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 )

Supports properly in the following browser and its version:

Dropped Internet Explorer 10 and 11
Microsoft Edge > 16 supported
Dropped Firefox < 60 Firefox version > 60 supported
Safari version > 12 supported
iOS Safari > 12 supported
Chrome version > 60 supported

3 Boostrap 4 vs Boostrap5: Enhanced Grid System

Bootstrap 4 and Bootstrap 5 both use the GRID system for web page layout design on various screen sizes and viewports. Because monitoring appears to be a major issue nowadays so Bootstrap 5 has added an extra breakpoint called XXL to target those screens as well (extra large)

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-sm">
      //First Column
    </div>
    <div class="col-sm">
      //Second Column
    </div>
    <div class="col-sm">
       // Third column
    </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, free icons, 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.

bootstrap-5-icon

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 the 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 bootstrap 5 has generic looks for all those form elements and is independent of browsers and OS.So, this brings uniformity which is a good approach.

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 a 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 Bootstrap 4 vs Bootstrap 5: New Accordion

Boostrap 5 includes an accordion with chevron icons on the right side of each accordion item. This icon has a state and can be clicked on. To remove the default background color, borders, and corner, use the accordion-flush class.

Bootstrap 4 does not have chevron icons and we used to create it ourselves with small javascript.

accordion-boostrap5

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

11 Bootstrap 4 vs Bootstrap 5: CSS custom Properties

Bootstrap 5 is using custom CSS properties on top of SASS variables. So, this cleans up bootstrap code and improves code reuse. Also, now CSS variables can be accessed inside javascript and can make changes on the CSS.So, we are not relying on the sass variable. This is one of the great features of bootstrap 5.

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.

12 Improved Utility API

In bootstrap 4 we have margin and padding utilities but in bootstrap 5 other utility API is also added. Also, we can create our own custom utilities for example you can add tailwind utilities inside a bootstrap. You can also remove not in used utilities so this helps to make your CSS file smaller.

13 Color Palette

Bootstrap 5 has added more color palettes. It has more than 100 color palette features. Bootstrap 5 has improved color contrast.

color-palette

14 Bootstrap 4 vs Bootstrap 5: Bootstrap Media Objects

Media objects in bootstrap 4 help to align images and video to align left or right with the textual content efficiently.

In bootstrap 4 we used to do like:

<div class="media" >
  <img class="js-lazy-image" data-src="..." class="mr-3  mt-3 rounded-circle" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Textual Content Here ...
  </div>
</div>

In Bootstrap 5:

<div class="d-flex">
  <img class="js-lazy-image" data-src="..." width="128" height="128" class="flex-shrink-0 mr-3 mt-3" alt="...">
  <div>
    <h5 class="mt-0">Media heading</h5>
    Textual Content Here...
  </div>
</div>

15 Updated Forms

In bootstrap 5, the .custom class is not in need. The radio button and checkbox are customs by default.Bootstrap 4 used to have custom,custom-control-label,custom-control-input,custom-control but bootstrap don't have those classes.

Bootstrap 4 radio button with custom class

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="room1" name="room">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
</div>

Bootstrap 5 radio button

<div class="form-check">
  <input class="form-check-input" type="radio" name="room" id="room1">
  <label class="form-check-label" for="radio">Radio</label>
</div>

16 Bootstrap 5: Floating Label

Bootstrap 5 also added a floating label, which pushes up the label when you start typing in a text field. To enable floating labels, use the form-floating class. The id of the input field and the for of the label should be the same.

17 Loading Placeholder

Bootstrap 5 introduced a loading placeholder which shows some things are loading.

18 Static Site Generator

Both Jekyll and Hugo are static site generators. Bootstrap 4 is integrated with Jekyll through Sass but in Bootstrap 5 Hugo through Sass is used. Hugo seems to be a lightning-fast, flexible, easy to use, and configure static site generator.

19 Improved Customize Documentation

Bootstrap 5 has improved documentation and has more explanation. It is more readable.

20 Use of latest popper

Popper.js is not required in your projects if you do not need popovers, dropdowns, and modals. In bootstrap 4, it is set as required for better performance and with no errors. This popper is Upgraded from Popper v1.x to Popper v2.x in bootstrap 5.

If you use bootstrap bundle then you don't need poppers as separate scripts in both bootstrap 4 and bootstrap 5 projects.

21 RTL and off-canvas

Bootstrap 5 alpha is not having features like RTL and off-canvas, but according to their documentation they state that they will soon bring Right to Left language support like Arabic, Hebrew, Urdu soon.

Finally, Bootstrap 5 is not in the alpha version, and now the latest bootstrap supports RTL(right to left language). You can set it up with a few steps.

rtl-vs-ltr-bootstrap5

Click here for more info.

Offcanvas is a bootstrap 5 sidebar and navbar component that you can use to toggled via javascript to appear from right, left or bottom of the viewport. It is considered to be Mobile friendly Navigation Drawer. You can achieve the same in bootstrap 4 but you have to add an additional plugin for it. But in bootstrap 5 it comes by default.

offcanvas leftbar — Fig. Offcanvas Left Nav bar

Should we move to Bootstrap 5?

Ans: Bootstrap helps you to speed up the process of developing websites and web applications. So, I suggest you use it. Currently, we have bootstrap 5 in the alpha stage. There are many templates for bootstrap 5 using currently available features. Some of them are :

Space
Fancy
Appi
Learn
Medic

You can go and play with bootstrap 5 features and if you want to build a simple site you can use it. But if you want many features like bootstrap 4 is currently having then just wait for a stable and mature version of bootstrap 5.

Thanks for reading. If you have any suggestions then please free to comment. Your valuable suggestions and advice will be greatly appreciated.