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.

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-down.d-none d-sm-block
.hidden-sm-down.d-none d-md-block
.hidden-md-down.d-none d-lg-block
.hidden-lg-down.d-none d-xl-block
.hidden-xs-up.d-none
.hidden-sm-up.d-sm-none
.hidden-md-up.d-md-none
.hidden-lg-up.d-lg-none
.hidden-xs.d-none
.hidden-sm.d-sm-none
.hidden-md.d-md-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.


SASS Customization in Bootstrap 4

If you intend to use SASS for Bootstrap 4, there are several variables you can customize.
$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

This tool is designed to convert only valid Bootstrap 3 markup to Bootstrap 4. If custom CSS has been applied (ie: themes and custom snippets) to your existing Bootstrap 3 markup, don't expect this tool to perform magic! If your existing Bootstrap 3 markup contains hacks, workarounds, or is not properly structured Bootstrap markup don't expect this tool is going to perfectly upgrade the markup to Bootstrap 4. Please don't run this converter, and then post a question on StackOverflow about "Why isn't my Bootstrap 4 blah blah blah working?".

Read and learn about Bootstrap 4

Bootstrap 4 HTML

Please donate to this free service


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

Bootstrap 4 Customizer

Upgrade Bootstrap 4 Alpha 6 to Bootstrap 4 Beta


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