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 avaliable.
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 avaiable 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.
Lable Pill .lable-pill is not avaiable. .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.
My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ayushjoshi599