Merry Christmas & Happy New Year

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer ends 1st January 2025, use code 2024XMAS25 during checkout.

Get offer!

Migration from Bootstrap 3 to Bootstrap 4

Łukasz Holeczek

Łukasz Holeczek

Wednesday, January 31, 2018

Migration from Bootstrap 3 to Bootstrap 4

Table of Contents

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.

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`

{:.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

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 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.