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>
<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>
<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>
<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
|
About kahelath
No comments