Skip to content
Related Articles
Open in App
Not now

Related Articles

Difference Between Bootstrap 3 and Bootstrap 4

Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 06 Jun, 2022
Improve Article
Save Article
Like Article

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 offBootstrap 3Bootstrap 4
Grid SystemIt is based on 4 tier grid system (xs, sm, md, lg).It is based on 5 tier grid system (xs, sm, md, lg, xl).
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 TableNot supported.In which we can add inverse table with the help of .table-inverse class.
Primary Unitpxrem
Font Size14px16px
Responsive TableIn Bootstrap 3, .responsive-table class added to <div> element.In bootstrap 4, .responsive-table class added using <table> element.
Condensed TableIt support .table-condensed.It support .table-sm.
Responsive ImageUse .img-responsive class.Use .img-fluid class.
Image AlignmentUse .pull-right and .pull-left class.You can use .pull-right, .pull-left and various other classes like .text-left and .text-center.
StructureFor applying dropdown list, we use <ul>, <li>For applying .dropdown-item we use <a>, <button>.
ColorLimited 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.
PagerIt uses .next or .previous.In which we use .pager-next or .pager-previous.
ClassUse .breadcrumb class against the <ul> tag.Use .breadcrumb class against the <li> tag.
Carousel ItemIt uses .item class.It uses .carousel-item class.
DividersApply .divider class to <li> element.Apply .dropdown-divider class to <div> element.
Table headerDoes not support table header..thread-default and .thread-inverse are supported.
Media,. media-body, .media-heading  and so on are 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
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!