Bootstrap has been the leading choice for front-end developers. It is an open-source front-end framework. The bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy.
The bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to creates that are responsive, mobile-first, and compatible with all modern browsers. In this tutorial, we see the difference between bootstrap 3 and bootstrap 4.
The bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to creates that are responsive, mobile-first, and compatible with all modern browsers. In this tutorial, we see the difference between bootstrap 3 and bootstrap 4.
| Sr.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 | Glyphicons | Supported | Not Supported |
| 9 | 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. |
| 10 | Dark/inverse Tables | Not supported | Uses .table-dark class to make dark/inverse tables |
| 11 | 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 |
| 12 | Form Control Size | By using .input-lg and .input-sm classes, you can increase or decrease size of an input control | By using .form-control-lg and .form-control-sm classes, you caniIncrease or decrease size of an input control |
| 13 | Help Text | Display the help text by using .help-block class | Display the help text by using .form-text class |
| 14 | Styles | Uses the .btn-default and .btn-info classes on buttons | Uses the .btn-secondary, .btn-dark, and .btn-light classes on buttons and dropped the .btn-default class. |
| 15 | Outline Buttons | Not Supported | Styling the buttons with outline color using .btn-outline-* class |
| 16 | Button Sizes | The .btn-xs class is available | Supported only .btn-sm and .btn-lg classes and dropped the .btn-xs class |
| 17 | Menu Headers | Use .dropdown-header class to the li tag | Use .dropdown-header class to h1 - h2 tags |
| 18 | Dividers | Use the .divider class in the li element | Use the .dropdown-divider class in the div element |
| 19 | Fixed Navbars | Used .navbar-fixed-top and .navbar-fixed-bottom classes to fix the navbar to top or bottom | By using .fixed-top and .fixed-bottom classes, fix the navbar to top or bottom |
| 20 | Pagers | Pages can be align by using .previous and .next classes | Not supported |
| 21 | Jumbotron Full Width | It does not uses .jumbotron-fluid class on full-width jumbotrons | It uses .jumbotron-fluid class for full-width jumbotrons |
| 22 | Carousel Item | Uses .item class for carousel items. | Uses .carousel-item class for carousel items. |
| 23 | Wells, Panels and Thumbnails | Supported | Not supported. Use cards instead |
| 24 | Inline Navs | It doesn't include .nav-inline class | Display the navs as inline by using the .nav-inline class | 25 | Navbar Alignment | By using .navbar-right, .navbar-left classes, align components within the navbar. | Can either use spacing utilities for eg .mr-auto, or any of the flexbox alignment utilities. | 26 | Linked List Items/Button List Items | Apply .list-group-item to the a element. | Apply .list-group-item-action to the a element. | 27 | Cards | Not supported | Supported. Cards replace functionality that was previously provided by panels, wells, and thumbnails. | 28 | Wells, Panels and Thumbnails | Supported | Not supported | 29 | Affix | Supported | Not supported | 30 | Page Headers | The .page-header class is supported. | The .page-header class is not supported. | 31 | Jumbotron Full Width | It does not uses .jumbotron-fluid class on full-width jumbotrons | It uses .jumbotron-fluid class for full-width jumbotrons |