Migration from Bootstrap 3 to Bootstrap 4
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Wednesday, 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.
Table of Contents
Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.
Typography
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.page-header |
dropped |
.dl-horizontal |
dropped |
<blockquote> |
.blockquote |
Grid
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.col-xs-* |
.col-* |
.col-*-offset-* |
offset-* |
.col-*-push-* |
dropped |
.col-*-pull-* |
dropped |
- |
.order-*ex..order-11
Buttons
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.btn-default |
.btn-secondary |
.btn-xs |
dropped |
Button group
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.btn-group-justified |
btn-group.d-flex |
.btn-group-xs |
dropped |
Breadcrumbs
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.breadcrumb > li |
.breadcrumb > li.breadcrumb-item |
Carousel
{:.table.table-striped.td-half}
| 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
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.divider |
.dropdown-divider |
<span class="caret"></span> |
dropped |
- | Dropdown items now require
.dropdown-item
Forms
{:.table.table-striped.td-half}
| 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
{:.table.table-striped.td-half}
| 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
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.img-responsive |
.img-fluid |
.img-rounded |
.rounded |
.img-circle |
.rounded-circle |
Input groups
{:.table.table-striped.td-half}
| 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
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.label |
.badge |
.badge |
.badge.badge-pill |
.badge-default |
.badge-secondary |
Navbar
{:.table.table-striped.td-half}
| 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
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.nav > li |
.nav > li.nav-item |
.nav > li > a |
.nav > li.nav-item > a.nav-link |
Pagination
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.pagination > li |
.pagination > li.page-item |
.pagination > li > a |
.pagination > li.page-item > a.page-link |
Panels
{:.table.table-striped.td-half}
| 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
{:.table.table-striped.td-half}
| Bootstrap 3 | Bootstrap 4 |
|---|---|
.progress-bar-* |
.bg- |
.active |
.progress-bar-animated |
Tables
{:.table.table-striped.td-half}
| 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 |
