Difference between Bootstrap V3 and V4? Is It Worth Upgrading?

October 24, 2017

Bootstrap has been one of the most trusted front-end frameworks of all times. Navigation component has been simplified to a great extent in Bootstrap 4. One is required to create a new list of elements employing the latest nav base class. There are some recent additions like nav-link class, nav-item class and navigation bar styles also.

Bootstrap 4 framework has stopped it’s shipping with Glyphicons. Hence, it is lightweight and also requires manual integration or some other alternative. Bootstrap 4 adopted an enhanced version of Normalize.css i.e., Reboot.

Bootstrap 4 offers an improved form control. Bootstrap 4 demands one to properly indicate pagination and link items using page-item as well as page-link class. Bootstrap 4 offers its immense support to all the major and renowned browsers of all times.

Bootstrap 4 brought some major changes, adding new components, scrapping others.

Following are some of the most notable difference followed by more specific changes to relevant components.

Bootstrap 3

Bootstrap 4

Typography

.page-header Dropped
.dl-horizontal Dropped
<blockquote> .blockquote

Images

.img-responsive .img-fluid
.img-rounded .rounded
.img-circle .rounded-circle

Tables

Renamed
.table-condensed .table-sm
.active .table-active
.success .table-success
.info .table-info
.warning .table-warning
.danger .table-danger
New classes
.table-inverse
.thead-default
.thead-inverse

Forms

.control-label .form-control-label
.input-lg .form-control-lg
.input-sm .form-control-sm
.form-group-* .form-control-*
.help-block .form-text
.row .form-row
.has-error .has-danger
.form-control-static .form-control-plaintext

Buttons

.btn-default .btn-secondary
.btn-xs Dropped

Button group

.btn-group-justified Dropped
.btn-group-xs Dropped

Dropdowns

.divider .dropdown-divider
<span class="caret"></span> dropped
  Dropdown items now require .dropdown-item

Grid system

.col-{breakpoint}-{modifier}-{size} .{modifier}-{breakpoint}-{size}
ex. .col-md-push-9 ex. .col-md-push-9

Navs

.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link

Navbar

.navbar-expand-{breakpoint}
.navbar-default .navbar-light
.navbar-toggle .navbar-toggler
.navbar-form .form-inline

Panels

.panel .card
.panel-default Dropped
.panel-group .card-group
.panel-heading .card-header
.panel-title .card-title
.panel-body .card-body
.panel-footer .card-footer
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger Dropped
.panel-footer .card-footer

Carousel

.next .carousel-item-next
.prev .carousel-item-prev
.left .carousel-item-left
.right .carousel-item-right
.carousel-control.right .carousel-control-right
.carousel-control.left .carousel-control-left

Example:

Bootstrap 3


<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>Hello world!</h1>
</div>
<div class="panel panel-default">
<img src="http://getbootstrap.com/assets/img/devices.png" class="img-responsive" alt="bootstrap">
<div class="panel-body">
Panel is now Card
</div>
</div>
</div>
</div>

Bootstrap 4


<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>Hello world!</h1>
</div>
<div class="card">
<img src="http://getbootstrap.com/assets/img/devices.png" class="img-fluid" alt="bootstrap">
<div class="card-block">
Panel is now Card
</div>
</div>
</div>
</div>

Following HTML markup tool replaces the Bootstrap 3.x CSS classes with Bootstrap 4.x classes. Additionally, this tool updates the structure of components like Navbar, Panel, List and others in accordance with the Bootstrap 4 Docs. See the complete Bootstrap 4 Migration Guide for the latest changes.

Convert Bootstrap V3 to V4 in 1 click   |   Official Bootstrap 4 Documentation

Related Posts Earn more revenue from a well fused shopping cart into Drupal eCommerce website
5 ways to increase online sales using Magento Development
Last Update: October 24th, 2017