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.

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

Breadcrumbs

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

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

Carousel

{:.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

Dropdowns

{:.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

Navbar

{:.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

Navs

{:.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