Upgrade to Bootstrap 4

×Head's up! This service is based on Bootstrap 4 alpha-v5

Bootstrap 4 is the latest major overhaul, to the popular Bootstrap framework since 3.x was released in Aug 2013. 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.

Given 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-*.push-*-*
.col-*-pull-*.pull-*-*
.panel.card
.panel-heading.card-header
.panel-title.card-title
.panel-body.card-block
.panel-footer.card-footer
.panel-primary.card-primary.card-inverse
.panel-success.card-success.card-inverse
.panel-info.card-info.card-inverse
.panel-warning.card-warning.card-inverse
.panel-danger.card-danger.card-inverse
.well.card.card-block
.thumbnail.card.card-block
.list-inline > li.list-inline-item
.dropdown-menu > li.dropdown-item
.nav navbar > li.nav-item
.nav navbar > li > a.nav-link
.navbar-right.float-xs-right
.navbar-btn.nav-item
.btn-default.btn-secondary
.img-responsive.img-fluid
.form-horizontal(removed)
.radio.form-check
.checkbox.form-check
.input-lg.form-control-lg
.input-sm.form-control-sm
.control-label.form-control-label
.table-condensed.table-sm
.pagination > li.page-item
.pagination > li > a.page-link
.item.carousel-item
.text-help.form-control-feedback
.text-center.text-xs-center
.text-right.text-xs-right
.pull-right.float-xs-right
.pull-left.float-xs-left
.center-block.mx-auto
.visible-xs.hidden-sm-up
.hidden-sm.hidden-md-down
.hidden-md.hidden-lg-down
.hidden-xs.hidden-xs-down
.label.tag
.badge.tag.tag-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.


SASS Customization in Bootstrap 4

If you intend to use SASS for Bootstrap 4, there are several variables you can customize.
$enable-flex Swaps display:table with display:flex
$enable-rounded Enables predefined border-radius styles
$enable-shadows Enables predefined box-shadow styles
$enable-gradients Enables predefined gradients
$enable-transitions Enables predefined transitions

Bootstrap 3.x HTML

Bootstrap 4 HTML


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


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


Please support this free service by supporting our sponsors...
The #1 push notification platform for top brands.