How to migrate from Bootstrap 3 to Bootstrap 4 Beta

Monday, July 10, 2017

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}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.page-header`	dropped
`.dl-horizontal`	dropped
`<blockquote>`	`.blockquote`

Images

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.img-responsive`	`.img-fluid`
`.img-rounded`	`.rounded`
`.img-circle`	`.rounded-circle`

Tables

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.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`

Forms

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.control-label`	`.form-control-label`
`.input-lg`	`.form-control-lg`
`.input-sm`	`.form-control-sm`
`.form-group-*`	`.form-control-*`
`.help-block`	`.form-text`
`.row`	`.form-row`
`.has-error`	`.has-danger`
`.form-control-static`	`.form-control-plaintext`

Buttons

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.btn-default`	`.btn-secondary`
`.btn-xs`	dropped

Button group

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.btn-group-justified`	dropped
`.btn-group-xs`	dropped

Dropdowns

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.divider`	`.dropdown-divider`
`<span class="caret"></span>`	`dropped`

| Dropdown items now require .dropdown-item

Grid system

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.col-{breakpoint}-{modifier}-{size}`	`.{modifier}-{breakpoint}-{size}`
ex. `.col-md-push-9`	ex. `.push-md-9`

Navs

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.nav > li`	`.nav > li.nav-item`
`.nav > li > a`	`.nav > li.nav-item > a.nav-link`

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta

| .navbar-expand-{breakpoint} .navbar-default | .navbar-light .navbar-toggle | .navbar-toggler .navbar-form | .form-inline

Panels

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.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`

Carousel

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.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`