Introduction to bootstrap 5 and differences between bootstrap 5 and bootstrap 4

5 min readMar 12, 2021

Introduction

Bootstrap is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. Bootstrap helps to design the frontend.

Why bootstrap

Faster and Easier
Mobile First style
It is free ! Available on www.getbootstap.com
Brower support
Responsive Design

As of now bootstrap 5 alpha version has been released and there are some differences between bootstrap 4 and bootstrap 5. Bootstrap 5 is designed to be used without the jquery.

Installation

Either way we can download the bootstrap from here https://getbootstrap.com/docs/5.0/getting-started/download and add it into our project or we can add it by using cdn like that

If we’re using compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably

Once downloaded, unzipped and compressed the file we will see something like this in css folder

These are the most precompiled css files

In js folder

Bootstrap supports the latest, stable version of all major browsers and platforms. However it doesn’t support IE11. Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic features such as menu expansion, carousel, dropdowns etc. So instead of jquery this time bootstrap use vanilla javascript.

New Features

Vanilla JavaScript instead of jQuery
IE 10 and 11 support removed
CSS custom properties:- Bootstrap 5 now supports custom CSS properties. In Bootstrap 4 root variables were present for only color and fonts. Bootstrap 5 now offers CSS variables in a handful of components and layout options.
Expanded color palette:- Bootstrap 5 has now expanded its color palette to include more colors that are present in different shades such as $blue-100, $blue-200, $blue-300, …., $blue-900.
Update form controls:- Bootstrap 5 includes custom designed form controls. In Bootstrap 4 the form controls were using whatever defaults each browser provided. In Bootstrap 5 the form controls will offer much more consistent look and feel in all browsers due to its custom design.
Enhanced grid system:- While Bootstrap 5 keeps the grid system structure that was introduced in Bootstrap 4, it enhances it by adding new classes. This would mean less effort will be required to move the grid structure from the older to newer version. Here is the what changed in the Bootstrap 5 grid system.
New xxl grid tier.
Gutter classes can be added in grid using .g* utilities.
Form layout options have been replaced with the new grid system.
Vertical spacing classes have been added.
Columns are no longer position: relative by default.
RTL support:- Bootstrap 5 now includes RTL support. RTL (right-to-left) support means that we can build websites in languages such as Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi. The writings in these languages starts from the right of the page and continues to the left which demands it’s own specific style settings in order to accommodate with your overall design.
Name spaced data attribute:- Bootstrap utilizes HTML attributes to enable JavaScript behaviors. In Bootstrap 5, all such attributes have been renamed from data-* to data-bs-*.
Popper.js v2:- Tooltips and popovers in Bootstrap are powered by Popper.js. In Bootstrap 5, v2 of Popper.js has been adopted which brings small breaking changes
SVG icon’s library:- Bootstrap now offers SVG library of 1,000+ icons that are easy to integrate in your code. You can add these icons by inline code or SVG sprite. A web font version will also be introduced with the stable release of this icon library. to install the bootstrap icon write this npm command in cmd npm i bootstrap-icons

Differences b/w bootstrap 4 and bootstrap 5

On the basis of grid system bootstrap 4 has 5 tier which is xs, sm, md, lg, xl while bootstrap 5 has 6 tier xs, sm, md, lg, xl, xxl.
On the basis of colors bootstrap 4 has limited colors while as in bootstrap 5 extra color has been added with with improved color palette.
On the basis jquery bootstrap 4 has jquery and all related plugin while as in bootstrap 5 jquery has been removed. Instead of jquery it switched to vanilla javascript .
On the basis Internet Explorer bootstrap 4 support the IE11 which as bootstrap 5 doesn’t support Internet Explorer. it support the latest and stable version of all major browser.
On the basis of form elements bootstrap 4’s form element like radio button, checkbox have different look in different ios and browser while as bootstrap 5’s form element like radio button, checkbox have same styling in different browsers.
On the basis of icons bootstrap 4 doesn’t have icon for icons we use font awesome while as bootstrap has its own svg icons .
On the basis jumbotron bootstrap 4 support jumbotron while as bootstrap 5 doesn’t support jumbotron.
On the basis of card deck bootstrap 4 support card-deck while bootstrap 5 doesn’t support this feature.

Here are the some reasons why would I want to stick with bootstrap 4

Bootstrap 5 still in alpha version waiting for its stable version
Project need support of internet Explorer.

Here are the reason why would I want to switch to bootstrap 5

1. I want to utilize the new features of Bootstrap such as expanded color palette, enhanced grid system, custom utilities, RTL etc.