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.
