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

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

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