The Art of Writing Short Stories Read Here
Home
CSS

Differences Between Bootstrap 3 & Bootstrap 4

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).

  

You may also like :