Migration from Bootstrap 3 to Bootstrap 4

Łukasz Holeczek
Jan 31, 2018 · 3 min read

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

Łukasz Holeczek

Written by

Creator of CoreUI.io & GenesisUI, CEO & Co-founder of Brix.io, creator of BUX Specialist, UI Designer, Frontend Developer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade