Header Ads

ad728

Difference between bootstrap 3 and bootstrap 4




Bootstrap is most popular and trusted open source first front-end framework, it is simple to install, easy to use, and improbable time-saving, it is easily to create a highly-responsive and good-looking modern website. It is used and recognize by millions of programmers across the world, It is also a free front-end framework. It's merge HTML, CSS and JS based design templates for typography, Tooltips, navigation, tables, modals, image Variable and numerous other components, as well as JavaScript plugins.

DIFFERENCE BETWEEN BOOTSTRAP 3 AND BOOTSTRAP 4

The major difference between Bootstrap 3 and Bootstrap 4 is flex box, Bootstrap 4 is a latest version .Bootstrap 3 was released in the year 2013 and last version Bootstrap 3.3.7 released in July 2016, Bootstrap 4.0 was final released in the world January 19, 2018.


THE MOST IMPORTANT CHANGES IN BOOTSTRAP  4

1. Flexbox by default
2. Switched from Less to Sass
3. Drops IE8, IE9 and iOS 6 support          
4. Switched from px to rem
5. Improved Grid System
6. Relative CSS units.
7. Tooltips and Popovers
8. 1. Variable Customization
9. Utility Classes
10. Conclusion
11. Brand new customization options



Flexbox by default
Bootstrap 4 is very affluent with benefits such as a Flexbox based grid, responsive sizing and floats ,vertical center, auto margins auto-layout grid. The biggest difference between Bootstrap 3 and Bootstrap 4 is flexbox.

Below some flex button example:

<div class="d-flex p-3 bg-secondary text-white">
  
<div class="p-2 bg-info">bootstrapguru item 1</div>
  
<div class="p-2 bg-warning">bootstrapguru item 2</div>
  
<div class="p-2 bg-primary">bootstrapguru item 3</div>
</div>


Navigation

Bootstrap 4 Navigation is made very easy to use and new list of elements are added to nav base class
Below Some of the important changes in the Bootstrap 4 Navbar.
The .nav base class change to .navbar-nav.
The mobile navbar toggle change to .navbar-toggler  to  .navbar-toggler-icon
The old  .navbar-toggle class change to .navbar-toggler.

Below Navigation example:
<nav class="navbar navbar-expand-sm bg-light">


  
<ul class="navbar-nav">
    
<li class="nav-item">
      
<a class="nav-link" href="#"> bootstrapguru 1</a>
    
</li>
    
<li class="nav-item">
      
<a class="nav-link" href="#"> bootstrapguru 2</a>
    
</li>
    
<li class="nav-item">
      
<a class="nav-link" href="#"> bootstrapguru 3</a>
    
</li>
  
</ul>

</nav>

Browser Support

In Bootstrap 4 Drops IE8 and IE9 Support Bootstrap 4 is IE8 and iOS 6 support. Bootstrap 4  is now only IE9+ and iOS 7+. For sites needing either of those, use v3.

Improved Grid System

In Bootstrap 4 version improved grid system in 5 grid tier system, xs, sm, md, lg, and xl. The new grid tier, xl, extends the media query range all the way below to 544px. The grid system is mobile compatible, and the columns will re-arrange automatically rely on the screen size.




In bootstrap 4 version classes are 5

.col- (extra small devices - 576px)
.col-sm- (small devices - 576px)
.col-md- (medium devices - 768px)
.col-lg- (large devices - 992px)
.col-xl- (xlarge devices - 1200px)

Below some example

<div class="row">
  
<div class="col-*-*">Bootstrapguru</div>
  
<div class="col-*-*"> Bootstrapguru </div>
</div>
<div class="row">
  
<div class="col-*-*"> Bootstrapguru </div>
  
<div class="col-*-*"> Bootstrapguru </div>
  
<div class="col-*-*"> Bootstrapguru </div>
</div>

<div class="row">
  
<div class="col"> Bootstrapguru </div>
  
<div class="col"> Bootstrapguru </div>
  
<div class="col"> Bootstrapguru </div>
</div>


What are the different classes in bootstrap?
Between col difference
.col-*-offset-*
.offset-*
.col-*-push-*
.order-*-2
.col-*-pull-*
.order-*-1
Between panel difference
.panel
.card
.panel-heading
.card-header
.panel-title
.card-title
.panel-body
.card-body
.panel-footer
.card-footer
.panel-primary
.card.bg-primary.text-white
.panel-success
.card.bg-success.text-white
.panel-info
.card.text-white.bg-info
.panel-warning
.card.bg-warning
.panel-danger
.card.bg-danger.text-white
Between nav difference
.list-inline > li
.list-inline-item
.dropdown-menu > li
.dropdown-item
.nav navbar > li
.nav-item
.nav navbar > li > a
.nav-link
.navbar-right
.ml-auto
.navbar-btn
.nav-item
.navbar-fixed-top
.fixed-top
.nav-stacked
.flex-column
.btn-default
.btn-secondary
Between img difference
.img-responsive
.img-fluid
.img-circle
.rounded-circle
.img-rounded
.rounded
.form-horizontal
(removed)
Between component difference
.radio
.form-check
.checkbox
.form-check
.input-lg
.form-control-lg
.input-sm
.form-control-sm
.control-label
.col-form-label
.table-condensed
.table-sm
.pagination > li
.page-item
.pagination > li > a
.page-link
.pull-left
.float-left
.center-block
.mx-auto.d-block
.hidden-xs
.d-none
.hidden-sm
.d-sm-none
.hidden-md
.d-md-none
.hidden-lg
.d-lg-none
.visible-xs
.d-block.d-sm-none
.visible-sm
.d-none.d-sm-block.d-md-none
.visible-md
.d-none.d-md-block.d-lg-none


No comments

Post Bottom Ad

ad728