Migration from Bootstrap 3 to Bootstrap 4

January 31, 2018

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.

Try our Bootstrap 4 Migration Tool. The fastest way to migrate your Bootstrap 3 website to Bootstrap 4.

Typography

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

Grid

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

Buttons

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

Button group

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

Breadcrumbs

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

Carousel

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

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

Forms

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

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

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

Input groups

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

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

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

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

Pagination

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

Panels

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

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

Tables

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`