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.

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}

Bootstrap 4 alpha 6 Bootstrap 4 beta
.page-header dropped
.dl-horizontal dropped
<blockquote> .blockquote

Images

{:.table.table-striped}

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

Tables

{:.table.table-striped}

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

{:.table.table-striped}

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

{:.table.table-striped}

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

Button group

{:.table.table-striped}

Bootstrap 4 alpha 6 Bootstrap 4 beta
.btn-group-justified dropped
.btn-group-xs dropped

{:.table.table-striped}

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

Grid system

{:.table.table-striped}

Bootstrap 4 alpha 6 Bootstrap 4 beta
.col-{breakpoint}-{modifier}-{size} .{modifier}-{breakpoint}-{size}
ex. .col-md-push-9 ex. .push-md-9

{:.table.table-striped}

Bootstrap 4 alpha 6 Bootstrap 4 beta
.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link

{:.table.table-striped}

Bootstrap 4 alpha 6 Bootstrap 4 beta
  • | .navbar-expand-{breakpoint} .navbar-default | .navbar-light .navbar-toggle | .navbar-toggler .navbar-form | .form-inline

Panels

{:.table.table-striped}

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

{:.table.table-striped}

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

About the Author

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