Difference Between Bootstrap 3 and Bootstrap 4

Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used for design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applications with any server-side Technology like Java, PHP, etc and its responsive design allows any platform like computer tablet and mobile. 

We use Bootstrap because of many reasons that are:  

• Responsive design
• Browser support
• Mobile First Style
• Easy to learn

Different Version of Bootstrap:

• Version 2.0 supports responsive web design
• Version 3.0 supports mobile-first design
• Version 4.0 introduces SASS and Flexbox support

Difference between Bootstrap 3 and Bootstrap 4:

Basis off	Bootstrap 3	Bootstrap 4
Grid System	It is based on 4 tier grid system (xs, sm, md, lg).	It is based on 5 tier grid system (xs, sm, md, lg, xl).
CSS File	LESS	SASS
Button Size	.btn-xs class is supported.	In which their is only .btn-sm and .btn-lg is available.
Horizontal Form	.row class is not required using grid in forms.	.row class is required when using grid in form.
Inverse Table	Not supported.	In which we can add inverse table with the help of .table-inverse class.
Primary Unit	px	rem
Font Size	14px	16px
Responsive Table	In Bootstrap 3, .responsive-table class added to <div> element.	In bootstrap 4, .responsive-table class added using <table> element.
Condensed Table	It support .table-condensed.	It support .table-sm.
Responsive Image	Use .img-responsive class.	Use .img-fluid class.
Image Alignment	Use .pull-right and .pull-left class.	You can use .pull-right, .pull-left and various other classes like .text-left and .text-center.
Structure	For applying dropdown list, we use <ul>, <li>	For applying .dropdown-item we use <a>, <button>.
Color	Limited colors are available it support inverse navbars but not other classes.	There are many colors option .bg-dass or .navbar-light, .navbar-dark classes.
Jumbotron	.jumbotron-fluid class is not required on full-width.	.jumbotron-fluid class for full-width jumbotron.
Label Pill	.label-pill is not available.	.label-pill class for making the corner round.
Pager	It uses .next or .previous.	In which we use .pager-next or .pager-previous.
Class	Use .breadcrumb class against the <ul> tag.	Use .breadcrumb class against the <li> tag.
Afflix	Yes	No
Flexbox	No	Yes
Carousel Item	It uses .item class.	It uses .carousel-item class.
Dividers	Apply .divider class to <li> element.	Apply .dropdown-divider class to <div> element.
Table header	Does not support table header.	.thread-default and .thread-inverse are supported.
Media objects	.media,. media-body, .media-heading  and so on are supported.	.media is only supported.
CSS unit	Bootstrap 3 supports Px as CSS unit	Bootstrap 4 supports rem as CSS unit

My Personal Notes arrow_drop_up

Save