Quick Comparison Between Bootstrap 3 And Bootstrap 4 Onwards

Posted By : Saloni Arora | 24-May-2018

BBootstrap is a most common and widely used framework to design websites and web pages. Now bootstrap has launched bootstrap 4 which provide more responsiveness and faster stylesheets. It also made It easy to develop

 


Bootstrap 4 is not supported on IE9.

Quick Comparison between Bootstrap 3 and Bootstrap 4.

 

 

 Global Changes made in the latest version.
1)LESS CSS has been switched with SCSS.
2)Font size have been increased from 14px to 16px.

 

 Image Changes made in the latest version.
 1).img-responsive has been changes to .img-fluid.
 2).img-circle has been changes to .rounded-circle
 3).img-rounded has been changes to .rounded

 

 Improved grid system.
Bootstrap 4 has now changed the 4 tier grid system to 5 tier grid system.
1) Example-.col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 .

 It has removed the  xs cateogory and in this col- can do the work.

 

 Navigation bar Changes made in the latest version.

1) .navbar-default is now changed to .navbar-light.  :  In Bootstrap 3 default navbar was  class was .navbar-default.  and in Bootstrap 4  it  is navbar light.
2).navbar-toggle is now changed to .navbar-toggler. . : Navbar toggle is replaced with Navbar toggler class it is no different with it. 

 

Some More Changes.

  • Glyphicons are not supported in bootstrap 4.
  • Dropdowns can be created using <ul> or <div>. firstly, Dropdowns were made with the help of the <ul> and <li> tag. But now it has provided the ease of developing to the user.

New feature in Bootstrap 4 is:
 New Utility Classes for Spacing: 
a) Bootstrap 3  uses the clearfix just to adjust the floating <div>. 
b) This simply means that it uses  .m-a-0  to  Set all the margins set to zero. Margins are styled by m prefix and padding are styled and use the prefix  p.

 

I hope it will help you understand it quickly.

Thanks,

About Author

Author Image
Saloni Arora

Saloni Arora is a very positive person she always likes to take things positively. she has a desire of being a talented Front end developer . and she is seeking to grab more opportunities in future

Request for Proposal

Name is required

Comment is required

Sending message..