Bootstrap 4 Tutorial
Bootstrap 4 Useful Resources
Selected Reading
- Differences Between Bootstrap 3 and 4
- Bootstrap 4 - Utilities
- Bootstrap 4 - Components
- Bootstrap 4 - Content
- Bootstrap 4 - Grid System
- Bootstrap 4 - Layout
- Bootstrap 4 - Environment Setup
- Bootstrap 4 - Overview
- Bootstrap 4 - Home
Bootstrap 4 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Differences Between Bootstrap 3 and 4
Differences Between Bootstrap 3 and 4
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 <p> | Created with <ul> or <span> |
| 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 <span> 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-pst 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-inpne, .checkbox, or .checkbox-inpne classes | Displays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inpne 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-pght and .btn-dark classes on buttons and dropped the .btn-default class. |
| 16 | Outpne Buttons | Not Supported | Style the buttons with outpne color by using .btn-outpne-* 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 p tag | Use .dropdown-header class to h1 - h2 tags |
| 19 | Dividers | Use the .spanider class in the p element | Use the .dropdown-spanider class in the span 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 | Apgn 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 | Inpne Navs | It doesn t include .nav-inpne class | Display the navs as inpne by using the .nav-inpne class |