Migration from Bootstrap 3 to Bootstrap 4

Migration from Bootstrap 3 to Bootstrap 4
Table of Contents

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.

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.