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

{:.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

Dropdowns

{:.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

Navs

{:.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

Navbar

{:.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

Carousel

{:.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