Migration from Bootstrap 3 to Bootstrap 4

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.

Bootstrap 4 Migration Tool

Typography

• .page-header - dropped
• .dl-horizontal - dropped
• <blockquote> to .blockquote

Grid

• .col-xs-* to .col-*
• .col-*-offset-* to offset-*
• .col-*-push-* - dropped
• .col-*-pull-* - dropped

Buttons

• .btn-default to .btn-secondary
• .btn-xs - dropped

Button group

• .btn-group-justified to btn-group.d-flex
• .btn-group-xs - dropped

Breadcrumbs

• .breadcrumb > li to .breadcrumb > li.breadcrumb-item

Carousel

• .next to .carousel-item-next
• .prev to .carousel-item-prev
• .left to .carousel-item-left
• .right to .carousel-item-right
• .carousel-control.right to .carousel-control-right
• .carousel-control.left to .carousel-control-left

Dropdowns

• .divider to .dropdown-divider
• <span class="caret"></span> to dropped
• Dropdown items now require .dropdown-item

Forms

• .radio-inline - dropped
• .checkbox-inline - dropped
• .form-horizontal - dropped
• .control-label to .col-form-label
• .input-lg to .form-control-lg
• .input-sm to .form-control-sm
• .form-group-* to .form-control-*
• .help-block to .form-text.text-muted
• .has-error, .has-warning to :invalid
• .has-success to :valid
• .has-error to .has-danger
• .radio to .form-check
• .checkbox to .form-check
• .form-control-static to .form-control-plaintext

Helper classes

• .center-block to mx-auto
• .pull-left to float-left
• .pull-right to float-right
• .visible-xs-* to .d-block.d-sm-none
• .visible-sm-* to .d-block.d-md-none
• .visible-md-* to .d-block.d-lg-none
• .visible-lg-* to .d-block.d-xl-none
• .hidden-xs-up to .d-none
• .hidden-sm-up to .d-sm-none
• .hidden-md-up to .d-md-none
• .hidden-lg-up to .d-lg-none
• .hidden-xl-up to .d-xl-none

Images

• .img-responsive to .img-fluid
• .img-rounded to .rounded
• .img-circle to .rounded-circle

Input groups

• .input-group-addon to .input-group-prepend, .input-group-append
• .input-group-btn to .input-group-prepend, .input-group-append

Labels & Badges

• .label to .badge
• .badge to .badge.badge-pill
• .badge-default to .badge-secondary

Navbar

• .navbar-default to .navbar-light
• .navbar-toggle to .navbar-toggler
• .navbar-form to .form-inline
• .navbar-btn to .nav-item
• .navbar-right to .ml-auto
• .navbar-left to .mr-auto
• .navbar-fixed-top to .fixed-top

Navs

• .nav > li to .nav > li.nav-item
• .nav > li > a to .nav > li.nav-item > a.nav-link

Pagination

• .pagination > li to .pagination > li.page-item
• .pagination > li > a to .pagination > li.page-item > a.page-link

Panels

• .panel to .card
• .panel-default - dropped
• .panel-group to .card-group
• .panel-heading to .card-header
• .panel-title to .card-title
• .panel-body to .card-body
• .panel-footer to .card-footer
• .panel-primary - dropped
• .panel-success - dropped
• .panel-info - dropped
• .panel-warning - dropped
• .panel-danger - dropped
• .panel-footer to .card-footer

Progress

• .progress-bar-* to .bg-
• .active to .progress-bar-animated

Tables

• .table-condensed to .table-sm
• .active to .table-active
• .success to .table-success
• .info to .table-info
• .warning to .table-warning
• .danger to .table-danger

New classes

• .table-inverse
• .thead-default
• .thead-inverse