How to migrate from Bootstrap 3 to Bootstrap 4 Beta

How to migrate from Bootstrap 3 to Bootstrap 4 Beta
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

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

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

{:.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
Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
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

How to Center a Button in CSS
How to Center a Button in CSS