How Class of Bootstrap 4 differ from Bootstrap 3

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

5.Breadcrumbs

Bootstrap 3	Bootstrap 4
.breadcrumb > li	.breadcrumb > li.breadcrumb-item

6.Carousel

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

7.Dropdowns

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

13.Navbar

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

14.Navs

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.