Upgrade to Bootstrap 4

×Head's up! This service is based on Bootstrap 4.1.0. Also, try our Bootstrap 4 custom build tool.

This conversion service is intended to help you upgrade from Bootstrap 3 to Bootstrap 4. The original 2.x to 3 upgrade tool is here. (The Bootstrap 4 to Bootstrap 5 converter is coming soon)

Given valid Bootstrap 3 HTML markup, this upgrade tool replaces the Bootstrap 3.x CSS classes with Bootstrap 4.x classes. Additionally, this tool updates the structure of components like Navbar, Panel, List and others in accordance with the Bootstrap 4 Docs. See the complete Bootstrap 4 Migration Guide for the latest changes.


What's New in Bootstrap 4?

Here are the class changes this service will migrate
Bootstrap 3.xBootstrap 4
.col-*-offset-*.offset-*
.col-*-push-*.order-*-2
.col-*-pull-*.order-*-1
.panel.card
.panel-heading.card-header
.panel-title.card-title
.panel-body.card-body
.panel-footer.card-footer
.panel-primary.card.bg-primary.text-white
.panel-success.card.bg-success.text-white
.panel-info.card.text-white.bg-info
.panel-warning.card.bg-warning
.panel-danger.card.bg-danger.text-white
.well.card.card-body
.thumbnail.card.card-body
.list-inline > li.list-inline-item
.dropdown-menu > li.dropdown-item
.nav navbar > li.nav-item
.nav navbar > li > a.nav-link
.navbar-right.ml-auto
.navbar-btn.nav-item
.navbar-fixed-top.fixed-top
.nav-stacked.flex-column
.btn-default.btn-secondary
.img-responsive.img-fluid
.img-circle.rounded-circle
.img-rounded.rounded
.form-horizontal(removed)
.radio.form-check
.checkbox.form-check
.input-lg.form-control-lg
.input-sm.form-control-sm
.control-label.col-form-label
.table-condensed.table-sm
.pagination > li.page-item
.pagination > li > a.page-link
.item.carousel-item
.help-block.form-text
.pull-right.float-right
.pull-left.float-left
.center-block.mx-auto.d-block
.hidden-xs.d-none
.hidden-sm.d-sm-none
.hidden-md.d-md-none
.hidden-lg.d-lg-none
.visible-xs.d-block.d-sm-none
.visible-sm.d-none.d-sm-block.d-md-none
.visible-md.d-none.d-md-block.d-lg-none
.visible-lg.d-none.d-lg-block.d-xl-none
.label.badge
.badge.badge.badge-pill

Note: Currently this service does not migrate Progress Bars and Icon fonts. Glyphicons have been removed from Bootstrap 4, but another font icon library such as FontAwesome can be used.

Bootstrap 3.x HTML

Bootstrap 4 HTML


Leverage more Bootstrap Themes, Snippets and Examples at
Bootply, The Bootstrap Playground.

Bootstrap 4 Customizer


Additional Bootstrap 4 Resources

A Visual Guide to What's New in Bootstrap 4
Bootstrap 4 Grid Demo
Bootstrap 4 Breakpoints Demo
Themes and Upgrade Guide
Codeply Bootstrap 4 Playground
Bootstrap Custom Theme Creator