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