Migration from Bootstrap 3 to Bootstrap 4

Wednesday, January 31, 2018

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.

Try our Bootstrap 4 Migration Tool. The fastest way to migrate your Bootstrap 3 website to Bootstrap 4.

Typography

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .page-header | dropped .dl-horizontal | dropped <blockquote> | .blockquote

Grid

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .col-xs-* | .col-* .col-*-offset-* | offset-* .col-*-push-* | dropped .col-*-pull-* | dropped - | .order-* ex. .order-11

Buttons

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .btn-default | .btn-secondary .btn-xs | dropped

Button group

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .btn-group-justified | btn-group.d-flex .btn-group-xs | dropped

Breadcrumbs

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .breadcrumb > li | .breadcrumb > li.breadcrumb-item

Carousel

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .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

Dropdowns

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .divider | .dropdown-divider <span class="caret"></span> | dropped - | Dropdown items now require .dropdown-item

Forms

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .radio-inline | dropped .checkbox-inline | dropped .form-horizontal | dropped .control-label | .col-form-label .input-lg | .form-control-lg .input-sm | .form-control-sm .form-group-* | .form-control-* .help-block | .form-text.text-muted .has-error, .has-warning | :invalid .has-success | :valid .has-error | .has-danger .radio | .form-check .checkbox | .form-check .form-control-static | .form-control-plaintext

Helper classes

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .center-block | mx-auto .pull-left | float-left .pull-right | float-right .visible-xs-* | .d-block.d-sm-none .visible-sm-* | .d-block.d-md-none .visible-md-* | .d-block.d-lg-none .visible-lg-* | .d-block.d-xl-none .hidden-xs-up | .d-none .hidden-sm-up | .d-sm-none .hidden-md-up | .d-md-none .hidden-lg-up | .d-lg-none .hidden-xl-up | .d-xl-none

Images

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .img-responsive | .img-fluid .img-rounded | .rounded .img-circle | .rounded-circle

Input groups

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .input-group-addon | .input-group-prepend, .input-group-append .input-group-btn | .input-group-prepend, .input-group-append - | .input-group-text

Labels & Badges

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .label | .badge .badge | .badge.badge-pill .badge-default | .badge-secondary

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — - | .navbar-expand-{breakpoint} .navbar-default | .navbar-light .navbar-toggle | .navbar-toggler .navbar-form | .form-inline .navbar-btn | .nav-item .navbar-right | .ml-auto .navbar-left | .mr-auto .navbar-fixed-top | .fixed-top

Navs

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .nav > li | .nav > li.nav-item .nav > li > a | .nav > li.nav-item > a.nav-link

Pagination

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .pagination > li | .pagination > li.page-item .pagination > li > a | .pagination > li.page-item > a.page-link

Panels

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .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

Progress

{:.table.table-striped.td-half} Bootstrap 3 | Bootstrap 4 — | — .progress-bar-* | .bg- .active | .progress-bar-animated

Tables

{:.table.table-striped.td-half} | Bootstrap 3 | Bootstrap 4 | | — | — | | .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 |