Migration from Bootstrap 3 to Bootstrap 4

Image for post
Image for post

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store