Given valid Bootstrap 3 HTML markup, this upgrade tool replaces the Bootstrap 3.x CSS classes with Bootstrap 4.x classes. Additionally, this tool updates the structure of components like Navbar, Panel, List and others in accordance with the Bootstrap 4 Docs. See the complete Bootstrap 4 Migration Guide for the latest changes.
| Bootstrap 3.x | Bootstrap 4 |
| .col-*-offset-* | .offset-* |
| .col-*-push-* | .order-*-2 |
| .col-*-pull-* | .order-*-1 |
| .panel | .card |
| .panel-heading | .card-header |
| .panel-title | .card-title |
| .panel-body | .card-body |
| .panel-footer | .card-footer |
| .panel-primary | .card.bg-primary.text-white |
| .panel-success | .card.bg-success.text-white |
| .panel-info | .card.text-white.bg-info |
| .panel-warning | .card.bg-warning |
| .panel-danger | .card.bg-danger.text-white |
| .well | .card.card-body |
| .thumbnail | .card.card-body |
| .list-inline > li | .list-inline-item |
| .dropdown-menu > li | .dropdown-item |
| .nav navbar > li | .nav-item |
| .nav navbar > li > a | .nav-link |
| .navbar-right | .ml-auto |
| .navbar-btn | .nav-item |
| .navbar-fixed-top | .fixed-top |
| .nav-stacked | .flex-column |
| .btn-default | .btn-secondary |
| .img-responsive | .img-fluid |
| .img-circle | .rounded-circle |
| .img-rounded | .rounded |
| .form-horizontal | (removed) |
| .radio | .form-check |
| .checkbox | .form-check |
| .input-lg | .form-control-lg |
| .input-sm | .form-control-sm |
| .control-label | .col-form-label |
| .table-condensed | .table-sm |
| .pagination > li | .page-item |
| .pagination > li > a | .page-link |
| .item | .carousel-item |
| .help-block | .form-text |
| .pull-right | .float-right |
| .pull-left | .float-left |
| .center-block | .mx-auto.d-block |
| .hidden-xs | .d-none |
| .hidden-sm | .d-sm-none |
| .hidden-md | .d-md-none |
| .hidden-lg | .d-lg-none |
| .visible-xs | .d-block.d-sm-none |
| .visible-sm | .d-none.d-sm-block.d-md-none |
| .visible-md | .d-none.d-md-block.d-lg-none |
| .visible-lg | .d-none.d-lg-block.d-xl-none |
| .label | .badge |
| .badge | .badge.badge-pill |
Note: Currently this service does not migrate Progress Bars and Icon fonts. Glyphicons have been removed from Bootstrap 4, but another font icon library such as FontAwesome can be used.
Leverage more Bootstrap Themes, Snippets and Examples at
Bootply, The Bootstrap Playground.
