Migrating to BS V4

Class changes in bootstrap 4 from bootstrap 3

The most changes in class of  bootstrap 4 are summarized below:

Bootstrap 3Bootstrap 4
.col-*-offset-*.offset-*
.col-*-push-*.order-*-2
.col-*-pull-*.order-*-1
.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
.well.card.card-body
.thumbnail.card.card-body
.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
.img-responsive.img-fluid
.img-circle.rounded-circle
.img-rounded.rounded
.form-horizontal(removed)
.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
.item.carousel-item
.help-block.form-text
.pull-right.float-right
.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
.visible-lg.d-none.d-lg-block.d-xl-none
.label.badge
.badge.badge.badge-pill

Other Migration

In addition to the classes change and updates above, the following class names also need to be changed if you’re migrating from Bootstrap 3 to Bootstrap 4.

Bootstrap 3Bootstrap 4
< blockquote >.blockquote
.previous.pager-next
.next.pager-next
.item.carousel-item
.nav>li>a.nav / .nav-item

 

Published by myadmin

    Leave a Reply

    Your email address will not be published. Required fields are marked *