Difference between Bootstrap 3, 4 and 5

What is Bootstrap?

Bootstrap is a free and open-source web development framework. It’s designed to ease the web development process of responsive, mobile-first websites by providing a collection of syntax for template designs.

As a framework, Bootstrap includes the basics for responsive web development, so developers only need to insert the code into a pre-defined grid system. The Bootstrap framework is built on Hypertext Markup Language (HTML), cascading style sheets (CSS) and Javascript. Web developers using Bootstrap can build websites much faster without spending time worrying about basic commands and functions.

Why Bootstrap?

• Bootstrap is a free front-end framework, with the purpose to make web development faster and easier.
• It also includes HTML and CSS-based design templates for forms, typography, buttons, navigation, tables, modals, image carousels, and many other components along with other optional JavaScript plugins.
• Bootstrap also provides the users with the ability to easily create responsive designs.
• The responsive CSS of Bootstrap also adjusts to phones, tablets, and desktops easily.
• It is compatible with all modern browsers like Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera.

Bootstrap 5 was released on 07-Dec-2020. Bootstrap 4 was released on 07-Jan-2018. Here is Difference between Bootstrap 5, Bootstrap 4 and Bootstrap 3.

Browser Support

• Bootstrap 3 Support Internet Explorer 8 and 9
• Bootstrap 4 No support for I.E 8 and 9 only
• Bootstrap 5 No support for I.E

Grid system

• Bootstrap 3 has 4 tier grid system that includes col-lg- , col-md- , col-sm-, col-xs .
• Bootstrap 4 has 5 tier grid system that includes col-xl, col-lg- , col-md- , col-sm-, col- .
• Bootstrap 5 has 6 tier grid system that includes col-xxl, col-xl, col-lg-, col-md- , col-sm-, col-col- .

Css unit

• Bootstrap 3 CSS unit in Bootstrap 3 is px.
• Bootstrap 4 CSS unit in Bootstrap 4 is rem.
• Bootstrap 5 CSS unit in Bootstrap 5 is rem.

Container

• Bootstrap 3 Container Size 1170px
• Bootstrap 4 Container Size 1140px
• Bootstrap 5 Container Size 1320px

Responsive images

• Bootstrap 3 The .img-responsive class is used for creating the responsive images in it.
• Bootstrap 4 The .img-fluid class is used for creating the responsive images in it.
• Bootstrap 5 The .img-fluid class is used for creating the responsive images in it.

Jquery plug-in

• Bootstrap 3 Includes jquery and all associated plug-ins.
• Bootstrap 4 Includes jquery and all associated plug-ins.
• Bootstrap 5 Jquery has been deleted and replaced with vanilla JS and several functional plug-ins.

Flexbox

• Bootstrap 3 Use CSS Float and Clear.
• Bootstrap 4 Use CSS Flexbox.
• Bootstrap 5 Use CSS Flexbox, CSS functions and variables.

Carousel Item

• Bootstrap 3 It uses .item class.
• Bootstrap 4 It uses .carousel-item class.
• Bootstrap 5 It uses .carousel-item class.