Uncategories Difference between Bootstrap3 and Bootstrap4

Difference between Bootstrap3 and Bootstrap4

Posted By: 1 Comment

BOOTSTRAP ?:  Bootstrap is an open  source CSS framework  direct at  responsive , mobile first front end  web development . it contain CSS framework , java script  based design templates for forms ,buttons, navigation and other interface components. Bootstrap  has best lightweight CSS framework  . its purpose to create  web application  and website .It  support  dynamic website and web application . It is one of  the most preferred  front -end framework as it aids an easy and fast processing to develop a website. It support all major browser and fast loading responsive web pages.
WHY USING BOOTSTRAP FOR CREATE   WEBSITE :A  software  framework that by design support web application developments its  create  a responsive  webdesign framework .Bootstrap is creating  some amazing products  such as website  template .It is  an open source .Bootstrap has lightweight  CSS framework that  automatically  adjusts the webpage depending on the size of display  screen at  very high speed for developing mobile first project that  are  responsive . Bootstrap is very popular  JS, HTML,and best CSS framework  on the WEB.
HISTORY  OF BOOTSTRAP   originally  named  twitter blueprint was developed  by mark otto and jacob  Thornton at twitter  as framework to encourage consistency across internal tools   it  was  renamed from twitter  blueprint to  Bootstrap and related  as an open source project on  August 19,2011.

CSS  framework  significantly  streamline  the work flow. with CSS framework  developer  can bring up a simple  website skeleton  in no time  having  browser-incompatibility  problem  fixed. many different CSS framework  available  

MOST  TOP  FRONT - END CSS  FRAMEWORKS Bootstrap 4 ,Slant.co,  Materialize CSS ,  pure,  ULKit,  SemanticUI , Starter Templates, foundation, Refactoring UI.

Bootstrap  CDN:  when  you only need  to include  bootstrap's  compiled  CSS or JS  you  can  use Bootstrap CDN

CSS only: Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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">poo creativity  tech blog 1</div>
  <div class="p-2 bg-warning">poo creativity tech 2</div>
  <div class="p-2 bg-primary">poo creativity tech  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="#"> poo creativity tech blog1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> poo creativity tech blog 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"> poo creativity tech blog 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-*-*">poo creativity tech blog </div>
  <div class="col-*-*"> poo creativity tech blog </div>
</div>
<div class="row">
  <div class="col-*-*"> poo creativity tech blog </div>
  <div class="col-*-*">poo creativity tech blog </div>
  <div class="col-*-*"> poo creativity tech blog </div>
</div>
<div class="row">
  <div class="col"> poo creativity tech blog </div>
  <div class="col"> poo creativity tech blog </div>
  <div class="col"> poo creativity tech blog </div>
</div>
 WHAT  ARE THE  DIFFERENT  CLASSES IN BOOTSTRAP 
 BOOTSTRAP 3 :                                        BOOTSTRAP 4:
                                                                                                                  

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


1 comment:

  1. kahelath16 January 2020 at 02:46

    Great thanks for shaing

    https://www.katutorial.com/2019/12/difference-between-bootstrap-3-and.html

    ReplyDelete