Open In App

Difference Between Bootstrap 3 and Bootstrap 4

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to 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 there 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

Last Updated : 03 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads