Difference between Bootstrap 3 and Bootstrap 4
In this article, we will see the comparison between two versions of bootstrap that are Bootstrap 3 and Bootstrap 4.
Bootstrap is the popular and powerful front-end framework to build responsive websites using HTML, CSS, and JavaScript. It is the first choice of front-end developers. Bootstrap 4 is the latest version of Bootstrap. It has done up with some changes by adding new components.
Before jumping directly to the comparison, let’s first see a brief description of Bootstrap, Bootstrap 3, and Bootstrap 4.
What is Bootstrap?
Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile-friendly website. It is a front-end framework used for easier and faster web development. Bootstrap is free to download and use. A website is called a responsive website which can automatically adjust itself to look good on all devices, from smartphones to desktops etc.
Bootstrap facilitates us to create responsive designs. It is easy to use and compatible on most browsers such as Chrome, Firefox, Internet Explorer, Safari, Opera, etc.
What is Bootstrap 3?
Bootstrap 3 is the third version of bootstrap. It is free to download and use. Bootstrap 3 is used for adding design in HTML documents similar to cascading style sheets. It supports mobile-first design.
The grid system of Bootstrap 3 has 4-tiers that are xs, sm, md, and lg, while there are 5-tiers in the Bootstrap 4 grid system. The CSS unit in Bootstrap 3 is px. Here, the class .img-responsive is used for creating the responsive images, while this feature has been changed in Bootstrap 4. In Bootstrap 3, dark or inverse tables are not supported, whereas they are supported in Bootstrap 4.
What is Bootstrap 4?
Bootstrap 4 is the latest and newest version of Bootstrap. It has 5-tier grid systems that are xs, sm, md, lg, and xl. It has new many changes, such as the CSS unit in Bootstrap 4 is rem, .img-fluid is used for creating the responsive images. In Bootstrap 4, a user can create dark or inverse tables by using the .table-dark class.
Similarly, there are various changes that have been done. We will see the changes in the comparison chart by comparing them with the features of Bootstrap 3.
Bootstrap 3 v/s Bootstrap 4
Now, let’s see the comparison chart between Bootstrap 3 and Bootstrap 4. We are comparing both terms on the basis of some characteristics.
| S.no. | On the basis of | Bootstrap 3 | Bootstrap 4 |
|---|---|---|---|
| 1. | Grid system | Bootstrap 3 has 4 tier grid system that includes xs, sm, md, and lg. | Bootstrap 4 has 5 tier grid system that includes xs, sm, md, lg, and xl. |
| 2. | CSS unit | CSS unit in Bootstrap 3 is px. | CSS unit in Bootstrap 4 is rem. |
| 3. | Font size | The font size is 14 px in Bootstrap 3. | Whereas, the font size is 16 px in Bootstrap 4. |
| 4. | Responsive images | The .img-responsive class is used for creating the responsive images in it. | The .img-fluid class is used for creating the responsive images in it. |
| 5. | Glyphicons | It supports Glyphicons. | It does not support Glyphicons. |
| 6. | Dark/inverse tables | It does not support dark/inverse tables. | In Bootstrap 4, the .table-dark class is used to create dark/inverse tables. |
| 7. | CSS source file | LESS (Leaner Style Sheets). | SCSS (Sassy CSS). |
| 8. | Dropdown structure | In Bootstrap 3, the dropdown structure is created using <ul> and <li>. | In Bootstrap 4, the dropdown structure is created using <ul> and <div>. |
| 9. | Well, panels, and Thumbnails | In Bootstrap 3, wells, panels, and thumbnails are supported. | In Bootstrap 4, wells, panels, and thumbnails are not supported. In place of that, cards can be used. |
| 10. | Carousel items | In Bootstrap 3, the class .items is used to create carousel items. | In Bootstrap 4, the class .carousel-items is used for carousel items. |
| 11. | Fixed navbars | In Bootstrap 3, the navbar is fixed to top or bottom using the .navbar-fixed-top and .navbar-fixed-bottom class. | In Bootstrap 4, the navbar is fixed to top or bottom by using the .fixed-top and .fixed-bottom classes. |
| 12. | Navbars colors | In Bootstrap 3, there is a limited color options. It supports inverse navbars. It does not support other classes. | In Bootstrap 4, there are new color options. It introduced the .navbar-light, .navbar-dark classes. It also allows the .bg-* classes to be used on navbars. |
| 13. | Extra small size button | A button of extra small size can be created with the help of .btn-xs class. | The button of extra small size was no longer available in Bootstrap 4. The only available classes are .btn-sm and .btn-lg. |
| 14. | Pager classes | In Bootstrap 3, pages can be aligned by using .previous class and .next class. | In Bootstrap 3, .previous class and .next class are not supported. |
| 15. | Dividers | In Bootstrap 3, to divide sections, the .divider class is used in the li element. | In Bootstrap 4, to divide sections, the .dropdown-divider can be used in the div element. |
| 16. | Full width jumbotron | In Bootstrap 3, the .jumbotron-fluid class cannot be used to create full width jumbotrons. | Bootstrap 4 gives access to the user to use the .jumbotron-fluid class to create full width jumbotrons. |
| 17. | Form control size | In Bootstrap 3, form size can be increased or decreased with the help of using .input-lg and .input-sm classes. | In Bootstrap 4, form size can be increased or decreased with the help of using .form-control-lg and .form-control-sm classes. |
| 18. | Help text | In Bootstrap 3, we can use the .help-block class to display the help text. | Whereas in Bootstrap 4, we can use the .form-text class to display the help text. |
| 19. | Menu Headers | In Bootstrap3, menu headers can be created by using the .dropdown-header class to the <li> tag. | In Bootstrap 4, menu headers can be created by using the .dropdown-header class to the <h1>, <h2> tags. |
| 20. | Inline navs | There is no .nav-inline class is included in Bootstrap 3. | There is a use of .nav-inline class in Bootstrap 4 to display the navs inline. |
| 21. | Outline buttons | Outline buttons are not supported in Bootstrap 3. | Bootstrap 4 introduced the .btn-outline-* class to style buttons with an outline color. |
| 22. | Button styles | It includes the .btn-default and .btn-info classes. | It includes the .btn-secondary, .btn-light and .btn-dark classes. |
| 23. | Button size | A button of extra small size can be created with the help of .btn-xs class. | The button of extra small size is no longer available in Bootstrap 4. The only available classes are .btn-sm and .btn-lg. |
| 24. | Offsetting columns | In Bootstrap 3, there is a use of col-*-offset-* classes to offset the columns. As an instance, col-md-offset-4. | Whereas, in Bootstrap 4, there is a use of offset-*-* classes to offset the columns. As an instance, offset-md-4. |
| 25. | Checkbox and radio buttons | In Bootstrap 3, the checkboxes or radio boxes were created with the help of classes such as .radio, .radio-inline, .checkbox, and .checkbox-inline. | In Bootstrap 4, the checkboxes and radio buttons are created with the help of using classes such as .form-check, .form-check-label, .form-check-input, and .form-check-inline. |
| 26. | Media objects | In Bootstrap 3, there are various classes used for media objects such as .media, .media-body, .media-object, .media-heading, .media-list, and so on. | In Bootstrap 4, there is only one class used for media objects which is .media. |
| 27. | Table header | It does not support table header. | In Bootstrap 4, table header modifier classes such as .thread-default, and .thread-inverse are added. |
Conclusion
From the above comparison chart, it is clear that the latest version of Bootstrap has various improvements. So, in this article, we have seen the comparison between two versions of bootstrap that are Bootstrap 3 and Bootstrap 4. The comparison between Bootstrap 3 and Bootstrap 4 are not limited to this article. To learn more, it is best to visit the official website of Bootstrap.
So, that’s all about the article. Hope the article will be informative and helpful to you to improve your user experience and development skills.