.svg)
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 |
