How to migrate from Bootstrap 3 to Bootstrap 4 Beta

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

Black Friday aka Black Week aka Bull Shit?


React? We’ve got (no) problem. Top5 React issues.


CoreUI & Vue.js Forge… cause 1 is just not enough!



Vue.js Forge