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.
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 |
Bootstrap 3 |
Bootstrap 4 |
.btn-default |
.btn-secondary |
.btn-xs |
dropped |
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 |
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 |
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 |
Navbar
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 |
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 |