twitter-bootstrap Migrating to Bootstrap 4 Bootstrap 3 to Bootstrap 4 CSS Changes
Example
Since Bootstrap 4 is a major rewrite, many of the Bootstrap 3.x class names have changed or been removed. The restructuring of components such as the Navbar, and the introduction of new CSS classes and Flexbox support means that upgrading to 4.x is not a simple conversion process from 3.x.
However, there are some Bootstrap 3.x CSS classes that have a specific Bootstrap 4 replacement.
CSS class name/selector changes from Bootstrap 3.3.7 to 4 (alpha 6)
{t} - represents a tier or breakpoint (ie: sm,md,lg,etc..).xs tier is the default, and doesn't need to be specified: col-3,col-6,etc..
{u} - represents a col unit size (ie: 1-12)
| Bootstrap 3.x | Bootstrap 4 |
|---|---|
| .col-{t}-{u} | .col-{t}-{u} (leave {t} blank for xs) |
| .col-{t}-offset-{u} | .offset-{t}-{u} (leave {t} blank for xs) |
| .col-{t}-push-{u} | .push-{t}-{u} (leave {t} blank for xs) |
| .col-{t}-pull-{u} | .pull-{t}-{u} (leave {t} blank for xs) |
| .panel | .card |
| .panel-heading | .card-header |
| .panel-title | .card-title |
| .panel-body | .card-block |
| .panel-footer | .card-footer |
| .panel-primary | .card-primary.card-inverse |
| .panel-success | .card-success.card-inverse |
| .panel-info | .card-info.card-inverse |
| .panel-warning | .card-warning.card-inverse |
| .panel-danger | .card-danger.card-inverse |
| .well | .card.card-block |
| .thumbnail | .card.card-block |
| .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 | .form-control-label |
| .table-condensed | .table-sm |
| .pagination > li | .page-item |
| .pagination > li > a | .page-link |
| .item | .carousel-item |
| .text-help | .form-control-feedback |
| .pull-right | .float-right |
| .pull-left | .float-left |
| .center-block | .mx-auto |
| .collapse.in | .collapse.show |
| .hidden-sm | .hidden-md-down |
| .hidden-md | .hidden-lg-down |
| .hidden-xs | .hidden-xs-down |
| .visible-xs | .hidden-sm-up |
| .visible-sm | .hidden-xs-down.hidden-md-up |
| .visible-md | .hidden-sm-down.hidden-lg-up |
| .visible-lg | .hidden-md-down.hidden-xl-up |
| .label | .badge |
| .badge | .badge.badge-pill |
Also see:
Bootstrap 3.x to 4 Migration Tool
What's New in Bootstrap 4
