Skip to main content

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.

Typography

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

Grid

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

Buttons

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

Button group

Bootstrap 3 Bootstrap 4
.btn-group-justified btn-group.d-flex
.btn-group-xs dropped
Bootstrap 3 Bootstrap 4
.breadcrumb > li .breadcrumb > li.breadcrumb-item
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
Bootstrap 3 Bootstrap 4
.divider .dropdown-divider
<span class="caret"></span> dropped
- Dropdown items now require .dropdown-item

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

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

Images

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

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

Labels & Badges

Bootstrap 3 Bootstrap 4
.label .badge
.badge .badge.badge-pill
.badge-default .badge-secondary
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
Bootstrap 3 Bootstrap 4
.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link

Pagination

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

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

Progress

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

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
Root Bootstrap Admin Template
Bootstrap 4 Admin Template
Prime Bootstrap Dashboard
Bootstrap 4 Admin Template
Alba Bootstrap Admin Panel
Bootstrap 4 Admin Template
Leaf Bootstrap Dashboard Template
Bootstrap 4 Admin Template