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 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 |
Contact Us