”;
Description
Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web by using HTML, CSS and JS framework.
The following table shows 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 |
Advertisements
”;