Migration from Bootstrap 3 to Bootstrap 4

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.

---

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

About the Author

Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.