How Class of Bootstrap 4 differ from Bootstrap 3

Date posted:16-11-2018

Introduction:

Basically, many  classes  used in Bootstrap 3, not used  in Bootstrap 4 and some class used in both the version; But, the new class ruling Bootstrap 4 which is replacing a old component of  Bootstrap 3. Like this, here are some more differences between class of bootstrap 3 to  Bootstrap 4. Bootstrap 4 brought some major changes, adding new component; clashing others. So, in this article, we will discuss on it detail.

Migration from Bootstrap 3 to Bootstrap 4:

1.Text/Typography:

Bootstrap 3 Bootstrap 4
.page-header dropped
.dl-horizontal dropped
<blockquote> .blockquote

2.Grid System:

Bootstrap 3 Bootstrap 4
.col-xs-* .col-*
.col-*-offset-* offset-*
.col-*-push-* dropped
.col-*-pull-* dropped
– .order-* ex. .order-11

3,Buttons

Bootstrap 3 Bootstrap 4
.btn-default .btn-secondary
.btn-xs dropped

4.Button group

Bootstrap 3 Bootstrap 4
.btn-group-justified btn-group.d-flex
.btn-group-xs dropped
Bootstrap 3 Bootstrap 4
.breadcrumb > li .breadcrumb > li.breadcrumb-item
Bootstrap 3 Bootstrap 4
.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
Bootstrap 3 Bootstrap 4
.divider .dropdown-divider
<span class="caret"></span> dropped
– Dropdown items now require .dropdown-item

8.Forms

Bootstrap 3 Bootstrap 4
.radio-inline dropped
.checkbox-inline dropped
.form-horizontal dropped
.control-label .col-form-label
.input-lg .form-control-lg
.input-sm .form-control-sm
.form-group-* .form-control-*
.help-block .form-text.text-muted
.has-error, .has-warning :invalid
.has-success :valid
.has-error .has-danger
.radio .form-check
.checkbox .form-check
.form-control-static .form-control-plaintext

9.Helper classes

Bootstrap 3 Bootstrap 4
.center-block mx-auto
.pull-left float-left
.pull-right float-right
.visible-xs-* .d-block.d-sm-none
.visible-sm-* .d-block.d-md-none
.visible-md-* .d-block.d-lg-none
.visible-lg-* .d-block.d-xl-none
.hidden-xs-up .d-none
.hidden-sm-up .d-sm-none
.hidden-md-up .d-md-none
.hidden-lg-up .d-lg-none
.hidden-xl-up .d-xl-none

10.Images

Bootstrap 3 Bootstrap 4
.img-responsive .img-fluid
.img-rounded .rounded
.img-circle .rounded-circle

11.Input groups

Bootstrap 3 Bootstrap 4
.input-group-addon .input-group-prepend, .input-group-append
.input-group-btn .input-group-prepend, .input-group-append
– .input-group-text

12.Labels & Badges

Bootstrap 3 Bootstrap 4
.label .badge
.badge .badge.badge-pill
.badge-default .badge-secondary
Bootstrap 3 Bootstrap 4
– .navbar-expand-{breakpoint}
.navbar-default .navbar-light
.navbar-toggle .navbar-toggler
.navbar-form .form-inline
.navbar-btn .nav-item
.navbar-right .ml-auto
.navbar-left .mr-auto
.navbar-fixed-top .fixed-top
Bootstrap 3 Bootstrap 4
.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link

15.Pagination

Bootstrap 3 Bootstrap 4
.pagination > li .pagination > li.page-item
.pagination > li > a .pagination > li.page-item > a.page-link

16.Panels

Bootstrap 3 Bootstrap 4
.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 dropped
.panel-success dropped
.panel-info dropped
.panel-warning dropped
.panel-danger dropped
.panel-footer .card-footer

17.Progress

Bootstrap 3 Bootstrap 4
.progress-bar-* .bg-
.active .progress-bar-animated

18.Tables

Bootstrap 3 Bootstrap 4
.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

The most notable changes are summarized above. Bootstrap 4 created a major changes in web development which overcomes the usage of bootstrap 3. Bootstrap 4 emerges in all new sites,easily modifiable and reliable. Use the enhanced class of BS4 and adapt to its goodness.

 

Post Views: 398

Leave a Reply