Differences between Bootstrap 3 & 4

Bootstrap is a free and open source front- end framework, and which is html, css, JavaScript framework for designing websites and web applications

Bootstrap Features:-

  • Frontend Framework
  • Basically just CSS and JS
  • Created by Twitter for Consistency in internal projects
  • Best possible user response to according to screen size
  • Mobile-first responsive design
  • Easy to use Even for the non-developer
  • Perfect for small colleges without much IT support
  • Consistency
  • It’s very easy to setup
  • It is supported by all popular browsers.
  • We can develop with in very less time
  • In this code also reduced
  • It’s support both the sass and less CSS pre-compilers
  • it’s open source we can use it any where

Differences between Bootstrap 3 & 4:-

Bootstrap 3

Bootstrap 4

Bootstrap 3 font size default is 14px only Bootstrap 4 font size default is 16px only
Here primary css unites used “px” Here primary css unites used “rm”( Relative to font-size of the root element)
default  font- family here Helvetica, san-serif, Arial font is used default  font- family here  ‘native font stack’ (system fonts) including san-serif, Arial, Helvetica Neue
Bootstrap 3 grid system has 4 types like  xs (for extra small device like phones) , sm (for small device like tablets) , md (for medium device like desktops) , lg (for large device like large desktop) Bootstrap 4 grid system has 5 types like  xs (for extra small device like phones) , sm (for small device like tablets) , md (for medium device like desktops) , lg (for large device like large desktop), xl (for extra-large device like LED, LCD)
In bootstrap 3 we can use Glyphicons In bootstrap 4 glyphicons have been dropped instead of this we can use fontawesome icons
Here  Offset columns uses col-*-offset-* like col-md-offset-4 Here  Offset columns uses  (offset-*-*) is used like offset-md-4
Here Image classes in bootstrap 3 is .img-responsive   and image alignment like .pull-right, .pull-left and .center-block Here Image classes in bootstrap 4 is .img-fluid and image alignment like .pull-*-right, .pull-*-left, .text-*-right, .text-*-left and .text-*-center are used.
table head class is supported in bootstrap 3, .table-dark class is not supported  here But bootstrap 4 table head class like .thead-light and .thead-dark and we can used here table-dark also
.table-responsive class we can used here Here we can be used to specify a particularly .table-responsive-*class is used ( xs, ms, md, lg, xl).
In forms we can used  .form-horizontal  class. But .form-horizontal class is dropped in Bootstrap 4.
Form .control-label class used here and Form .col-form-label class used here
Here .row class does not require in forms Here forms required either .row class or .form-row class
And in form checkbox and radio buttons used .radio, .radio-inline, .checkbox and .checkbox-inline class in bootstrap 3 form checkbox and radio buttons used .form-check-input, .check, .check-label and .form-check-inline cla .form-check-input, .check, .check-label and .form-check-inline class in bootstrap 4
Form control sizes here used like .input-sm and .input-lg to increase and decrease the size of an input Form control sizes bootstrap 4 .form-control-lg and .form-control-sm is used.
In form use the .help-block class to display help text In form use the .form-text class to display help text
Bootstrap 3 button class like .btn-default, .btn-xs, .btn-sm, .btn-md,.btn-lg(primary,info,warning,danger) Bootstrap 4 button class like .btn-secondary contextual classes (primary,info,warning,danger) and sizes also available
Apply drop down list like here ul and li, menu header . dropdown-header to the <li> tag .dropdown-item to a<a> or <button>and wrap them all in a <div> with a . dropdown-menu classes applied.
In bootstrap 3 cards are not supported here

 

In bootstrap 4 cards are supported

And cards functionality that was previously provided by panels, well and thumbnails

Navbar classes are like .navbar-inverse navbar-default and .navbar-fixed-top, .navbar-fixed-bottom  outline buttons are not support here Bootstrap 4 navbar classes are .navbar-light, .navbar-dark and .fixed-top, .fixed-bottom classes including outline colors also
Panel, Well, Affix, Thumbnails  classes are supported in bootstrap3 Panel, Well, Affix, Thumbnails  classes are not supported in bootstrap4
In carousel we need to used class like .item Here carousel we used class like .carousel-item
For labels .label-pill class we have to used here For labels .badge-pill class here
Media object classes are .media, .media-object, .media-body, .media-heading, .media-right, .media-left, .media-list and .media-body Bootstrap 4 uses .media class in which margins can be applied using spacer utilities. Some flexboxes are uses in bootstrap 4

Leave a Reply

Close Menu