Skip to main content

How to migrate from Bootstrap 3 to Bootstrap 4 Beta

How to migrate from Bootstrap 3 to Bootstrap 4 Beta

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 4 alpha 6 Bootstrap 4 beta
.page-header dropped
.dl-horizontal dropped
<blockquote> .blockquote

Images

Bootstrap 4 alpha 6 Bootstrap 4 beta
.img-responsive .img-fluid
.img-rounded .rounded
.img-circle .rounded-circle

Tables

Bootstrap 4 alpha 6 Bootstrap 4 beta
.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

Forms

Bootstrap 4 alpha 6 Bootstrap 4 beta
.control-label .form-control-label
.input-lg .form-control-lg
.input-sm .form-control-sm
.form-group-* .form-control-*
.help-block .form-text
.row .form-row
.has-error .has-danger
.form-control-static .form-control-plaintext

Buttons

Bootstrap 4 alpha 6 Bootstrap 4 beta
.btn-default .btn-secondary
.btn-xs dropped

Button group

Bootstrap 4 alpha 6 Bootstrap 4 beta
.btn-group-justified dropped
.btn-group-xs dropped
Bootstrap 4 alpha 6 Bootstrap 4 beta
.divider .dropdown-divider
<span class="caret"></span> dropped
- Dropdown items now require .dropdown-item

Grid system

Bootstrap 4 alpha 6 Bootstrap 4 beta
.col-{breakpoint}-{modifier}-{size} .{modifier}-{breakpoint}-{size}
ex. .col-md-push-9 ex. .push-md-9
Bootstrap 4 alpha 6 Bootstrap 4 beta
.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link
Bootstrap 4 alpha 6 Bootstrap 4 beta
- .navbar-expand-{breakpoint}
.navbar-default .navbar-light
.navbar-toggle .navbar-toggler
.navbar-form .form-inline

Panels

Bootstrap 4 alpha 6 Bootstrap 4 beta
.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
Bootstrap 4 alpha 6 Bootstrap 4 beta
.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
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