Bootstrap3 | Bootstrap 4 |
Source CSS Files is in LESS. | Source CSS files Converted in SASS. The advantage of this move is that Bootstrap now compiles faster than ever. |
Has 4 grid system (col-xs-*, col-sm-*, col-md-*, col-lg-*). | Has 5 grid system (.col-, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-*). Bootstrap 4 has removed the xs from the lowest break point. Therefore, (col-) covers all devices. |
Offset class is like this (col-md-offset-4). | has changed the offset class (offset-md-4). |
Glyphicon support. | Bootstrap 4 also dropped Glyphicon support. |
Bootstrap 3 we are used this (.img-responsive) class for responsive image. | Bootstrap 4 has changes the class for responsive image (.img-fluid). |
.table-responsive class should be added to parent <div> element | .table-responsive class to be added to <table> element |
Employ .navbar-right, .navbar-left to align components | Employ spacing utilities such as .mr-auto, or flexbox alignment utilities |
Tooltips and Popovers:
Bootstrap 4 uses a powerful third party library called tether for positioning of components in relation to one another on a web page. It provides improved auto-placement of tooltips and popovers.
Since Tether is a third party JavaScript library. It has to be included in the HTML using a <script> tag before adding your bootstrap.js file.
rem unit for Typography :
We can still use px, em, and even pt for typography. Nothing really changes if you don't want it to.
Typography font sizing in Bootstrap 4 is done completely based on the rem unit of measurement. It's actually a super easy concept to grasp. With rem, all font sizes are relative to the root element (aka, the html tag).
- Log in to post comments