How to migrate from Bootstrap 3 to Bootstrap 4 Beta
July 10, 2017
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 |
| 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 |
| Bootstrap 4 alpha 6 |
Bootstrap 4 beta |
.btn-default |
.btn-secondary |
.btn-xs |
dropped |
| Bootstrap 4 alpha 6 |
Bootstrap 4 beta |
.btn-group-justified |
dropped |
.btn-group-xs |
dropped |
Dropdowns
| 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 |
Navs
| Bootstrap 4 alpha 6 |
Bootstrap 4 beta |
.nav > li |
.nav > li.nav-item |
.nav > li > a |
.nav > li.nav-item > a.nav-link |
Navbar
| 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 |
Carousel
| 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 |
