Migration from Bootstrap 3 to Bootstrap 4

Migration from Bootstrap 3 to Bootstrap 4

Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.

Table of Contents

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


Typography

{:.table.table-striped.td-half}

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

Grid

{:.table.table-striped.td-half}

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

Buttons

{:.table.table-striped.td-half}

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

Button group

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.btn-group-justified btn-group.d-flex
.btn-group-xs dropped

{:.table.table-striped.td-half}

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

{:.table.table-striped.td-half}

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

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.divider .dropdown-divider
<span class="caret"></span> dropped
  • | Dropdown items now require .dropdown-item

Forms

{:.table.table-striped.td-half}

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

Helper classes

{:.table.table-striped.td-half}

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

Images

{:.table.table-striped.td-half}

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

Input groups

{:.table.table-striped.td-half}

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

Labels & Badges

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.label .badge
.badge .badge.badge-pill
.badge-default .badge-secondary

{:.table.table-striped.td-half}

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

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link

Pagination

{:.table.table-striped.td-half}

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

Panels

{:.table.table-striped.td-half}

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

Progress

{:.table.table-striped.td-half}

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

Tables

{:.table.table-striped.td-half}

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

About the Author

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.