Migration from Bootstrap 3 to Bootstrap 4

Wednesday, January 31, 2018

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.

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

Bootstrap 3	Bootstrap 4
`.page-header`	dropped
`.dl-horizontal`	dropped
`<blockquote>`	`.blockquote`

Grid

Bootstrap 3	Bootstrap 4
`.col-xs-*`	`.col-*`
`.col--offset-`	`offset-*`
`.col--push-`	dropped
`.col--pull-`	dropped

| .order-* ex. .order-11

Buttons

Bootstrap 3	Bootstrap 4
`.btn-default`	`.btn-secondary`
`.btn-xs`	dropped

Button group

Bootstrap 3	Bootstrap 4
`.btn-group-justified`	`btn-group.d-flex`
`.btn-group-xs`	dropped

Breadcrumbs

Bootstrap 3	Bootstrap 4
`.breadcrumb > li`	`.breadcrumb > li.breadcrumb-item`

Carousel

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

Bootstrap 3	Bootstrap 4
`.divider`	`.dropdown-divider`
`<span class="caret"></span>`	`dropped`

| Dropdown items now require .dropdown-item

Forms

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

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

Bootstrap 3	Bootstrap 4
`.img-responsive`	`.img-fluid`
`.img-rounded`	`.rounded`
`.img-circle`	`.rounded-circle`

Input groups

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

Bootstrap 3	Bootstrap 4
`.label`	`.badge`
`.badge`	`.badge.badge-pill`
`.badge-default`	`.badge-secondary`

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

Bootstrap 3	Bootstrap 4
`.nav > li`	`.nav > li.nav-item`
`.nav > li > a`	`.nav > li.nav-item > a.nav-link`

Pagination

Bootstrap 3	Bootstrap 4
`.pagination > li`	`.pagination > li.page-item`
`.pagination > li > a`	`.pagination > li.page-item > a.page-link`

Panels

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

Bootstrap 3	Bootstrap 4
`.progress-bar-*`	`.bg-`
`.active`	`.progress-bar-animated`

Tables

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

Łukasz Holeczek is the founder of CoreUI and the lead developer of its JavaScript, React, and Vue products. He builds open-source UI tools that help developers create better, more accessible user interfaces — CoreUI is used across tens of thousands of projects on GitHub and has been downloaded more than 58 million times.

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

Łukasz shares his knowledge through technical software development articles on the CoreUI blog. He also advises enterprise companies on building solutions from start to finish, and through CoreUI he 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.

Subscribe to our newsletter

Get early information about new products, product updates and blog posts.

How to upgrade Bootstrap 4 alpha 6 to Bootstrap 4 beta