Migration from Bootstrap 3 to Bootstrap 4

Migration from Bootstrap 3 to Bootstrap 4
Table of Contents

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.

Typography

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.page-header dropped
.dl-horizontal dropped
<blockquote> .blockquote

Grid

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.col-xs-* .col-*
.col-*-offset-* offset-*
.col-*-push-* dropped
.col-*-pull-* dropped
  • | .order-* ex. .order-11

Buttons

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.btn-default .btn-secondary
.btn-xs dropped

Button group

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.btn-group-justified btn-group.d-flex
.btn-group-xs dropped

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.breadcrumb > li .breadcrumb > li.breadcrumb-item

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.next .carousel-item-next
.prev .carousel-item-prev
.left .carousel-item-left
.right .carousel-item-right
.carousel-control.right .carousel-control-right
.carousel-control.left .carousel-control-left

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.divider .dropdown-divider
<span class="caret"></span> dropped
  • | Dropdown items now require .dropdown-item

Forms

{:.table.table-striped.td-half}

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

Helper classes

{:.table.table-striped.td-half}

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

Images

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.img-responsive .img-fluid
.img-rounded .rounded
.img-circle .rounded-circle

Input groups

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.input-group-addon .input-group-prepend, .input-group-append
.input-group-btn .input-group-prepend, .input-group-append
  • | .input-group-text

Labels & Badges

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.label .badge
.badge .badge.badge-pill
.badge-default .badge-secondary

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
  • | .navbar-expand-{breakpoint} .navbar-default | .navbar-light .navbar-toggle | .navbar-toggler .navbar-form | .form-inline .navbar-btn | .nav-item .navbar-right | .ml-auto .navbar-left | .mr-auto .navbar-fixed-top | .fixed-top

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.nav > li .nav > li.nav-item
.nav > li > a .nav > li.nav-item > a.nav-link

Pagination

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.pagination > li .pagination > li.page-item
.pagination > li > a .pagination > li.page-item > a.page-link

Panels

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.panel .card
.panel-default dropped
.panel-group .card-group
.panel-heading .card-header
.panel-title .card-title
.panel-body .card-body
.panel-footer .card-footer
.panel-primary dropped
.panel-success dropped
.panel-info dropped
.panel-warning dropped
.panel-danger dropped
.panel-footer .card-footer

Progress

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.progress-bar-* .bg-
.active .progress-bar-animated

Tables

{:.table.table-striped.td-half}

Bootstrap 3 Bootstrap 4
.table-condensed .table-sm
.active .table-active
.success .table-success
.info .table-info
.warning .table-warning
.danger .table-danger
New classes
- .table-inverse
- .thead-default
- .thead-inverse
Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to Remove Underline from Link in CSS
How to Remove Underline from Link in CSS

Understanding and Resolving the “React Must Be in Scope When Using JSX
Understanding and Resolving the “React Must Be in Scope When Using JSX

What Does javascript:void(0) Mean?
What Does javascript:void(0) Mean?

How to Detect a Click Outside of a React Component
How to Detect a Click Outside of a React Component

CSS Selector for Parent Element
CSS Selector for Parent Element

How to Convert a Map to an Array in JavaScript
How to Convert a Map to an Array in JavaScript