Difference Between Bootstrap3 and Bootstrap4

Bootstrap is a CSS framework that is used to make website device friendly, it helps us to make websites mobile, tablet, desktop-friendly by using their grid system. Bootstrap has lots of features that helps web designer to design a website quickly such as carousel, navbar, collapse, cards, etc.

In this blog, we will learn the difference between bootstrap3 and bootstrap4 is. Bootstrap3 has very limited features for a web designer but now bootstrap4 is available for a designer it comes with a lot of features that helps web designer to make a website quickly as compared to bootstrap3.

Let’s see the major difference between the bootstrap3 and bootstrap4:

Topics

Bootstrap3

Bootstrap4

 

Grid System

 

It has 4 grid system classes (lg,md,sm, xs).

 

lg:  large device >1366px resolution screen.

 

md: medium device such as desktop, laptop <1366px resolution.

 

sm: small device such as a tablet, iPad.

 

xs: xtra small device such as mobile.

 

 

 

It has 5 grid system classes (xl,lg,md,sm,xs).

 

xl: xtra large screen >1366px resolution.

 

lg: large device such as desktop,laptop <1366px resolution.

 

md: medium device such as a tablet,iPad.

 

sm: small device is used for mobile horizontal view.

 

xs: xtra small device is used for mobile vertical view.

 

 

Architecture

 

 

Based on float system

 

Based on flex.

 

Spacing Classes

 

 

 There are no spacing classes.

 

It has spacing classes for margin padding. For example : mt,py-4,mb-5,pb-4 etc.

 

 

 

Conditional Classes

 

 

There are no conditional classes.

 

It has conditional classes. For example, you can use float left on the desktop and in mobile view, you can use float right without writing extra CSS code.

 

 

 

Responsive Image

 

 

It uses .img-responsive class.

 

It uses .img-fluid class.

 

Carousel

 

 

It uses .item-class

 

It uses .carousel-item-class.

 

CSS File

 

 

less

 

sass

 

 

Categories: web designing bootstrap

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo