
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.
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 released on October 29. 2014 and finalized on January 19, 2018. It is the successor of Bootstrap 3.
Boostrap 5
Bootstrap 5 framework was released on 16th June 2020
Boostrap 5 = Boostrap 4 + New Updates and Some Changes.
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 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 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 frameworks for building applications. 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 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 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 sizes and viewport. Monitoring is appearing to be huge so, bootstrap 5 is targeting those screen as well by adding an extra breakpoint called XXL (extra 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) |
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 of browsers and OS.So, this brings uniformity which is 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) 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
Bootstrap 5 is using custom CSS properties on top of SASS variables. So, this cleans up bootstrap code and improve code reuse. Also, now CSS variables can be accessed inside javascript and can make changes on the CSS.So, we are not relying on sass variable. This is one of the great features in 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.
11) 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.
12)Color Palette
Bootstrap 5 has added more color palette. It has more than 100 color palette features. Bootstrap 5 has improved color contrast.
13) 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:
// In Bootstrap 4
<div class="media" >
<img 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 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>
14) Updated Forms
In bootstrap 5, .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 donot 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>
15) 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.
16) Improved Customize Documentation
Bootstrap 5 has improved documentation and has more explanation.
17) Coming Soon Features like RTL and offcanvas
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.
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 comments. Your valuable suggestions and advice will be greatly appreciated.