Bootstrap is a powerful and popular front-end framework for creating the responsive mobile sites on the web using HTML, CSS and JS framework.
The following table shows the differences in Bootstrap 3 and Bootstrap 4 -
S.No. | Component | Bootstrap 3 | Bootstrap 4 |
1 | CSS source files | LESS | SCSS |
2 | Grid System | 4 tier grid system (xs, sm, md, lg) | 5 tier grid system (xs, sm, md, lg, xl) |
3 | CSS Unit | px | rem |
4 | Font Size | 14px | 16px |
5 | Dropdown Structure | Created with ul and li | Created with ul or div |
6 | Offsetting Columns | col-md-offset-4 | offset-md-4 |
7 | Images | .img-responsive class | .img-fluid class |
8 | Tables | Add .table-responsive class to parent div element | Add .table-responsive class to table element |
9 | Glyphicons | Supported | Not Supported |
10 | Media Objects | Uses classes for media objects, such as .media, .media-body, .media-object, .media-heading, .media-right, .media-left, .media-list and .media-body | Uses just .media class for media objects. |
11 | Dark/inverse Tables | Not supported | Uses .table-dark class to make dark/inverse tables |
12 | Checkboxes and Radio Buttons | Displays the checkboxes and radio buttons by using .radio, .radio-inline, .checkbox, or .checkbox-inline classes | Displays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inline classes |
13 | Form Control Size | Increase or decrease size of an input control by using .input-lg and .input-sm classes | Increase or decrease size of an input control by using .form-control-lg and .form-control-sm classes |
14 | Help Text | Display the help text by using .help-block class | Display the help text by using .form-text class |
15 | Styles | Uses the .btn-default and .btn-info classes on buttons | Uses the .btn-secondary, .btn-light and .btn-dark classes on buttons and dropped the .btn-default class. |
16 | Outline Buttons | Not Supported | Style the buttons with outline color by using .btn-outline-* class |
17 | Button Sizes | The .btn-xs class is available | Available only .btn-sm and .btn-lg classes and dropped the .btn-xs class |
18 | Menu Headers | Use .dropdown-header class to the li tag | Use .dropdown-header class to h1 - h2 tags |
19 | Dividers | Use the .divider class in the li element | Use the .dropdown-divider class in the div element |
20 | Fixed Navbars | Fix the navbar to top or bottom by using .navbar-fixed-top and .navbar-fixed-bottom classes | Fix the navbar to top or bottom by using .fixed-top and .fixed-bottom classes |
21 | Pagers | Align the pages by using .previous and .next classes | Not supported |
22 | Jumbotron Full Width | It does not uses .jumbotron-fluid class on full-width jumbotrons | It uses .jumbotron-fluid class for full-width jumbotrons |
23 | Carousel Item | Uses .item class for carousel items. | Uses .carousel-item class for carousel items. |
24 | Wells, Panels and Thumbnails | Supported | Not supported. Use cards instead |
25 | Inline Navs | It doesn't include .nav-inline class | Display the navs as inline by using the .nav-inline class |