How to upgrade Bootstrap 4 alpha.6 to Bootstrap 4 beta

How to upgrade Bootstrap 4 alpha.6 to Bootstrap 4 beta

After two years in the making, Bootstrap creators finally released first beta of Bootstrap 4. In latest version of Bootstrap 4 more then 650 files was changed, 67k lines was added, and 82k lines was deleted.

Following CSS classes was changed in latest version of Bootstrap 4

• .badge-default to .badge-dark
• .bg-faded to .bg-light
• .bg-inverse to .bg-dark
• .card-block to .card-body
• .card-outline-primary to .border-primary
• .card-outline-secondary to .border-secondary
• .card-outline-success to .border-success
• .card-outline-info to .border-info
• .card-outline-warning to .border-warning
• .card-primary to .bg-primary
• .card-success to .bg-success
• .card-info to .bg-info
• .card-warning to .bg-warning
• .card-danger to .bg-danger
• .hidden-xs-down to .d-none .d-sm-block
• .hidden-sm-down to .d-none .d-md-block
• .hidden-md-down to .d-none .d-lg-block
• .hidden-lg-down to .d-none .d-xl-block
• .hidden-xs-up to .d-none
• .hidden-sm-up to .d-sm-none
• .hidden-md-up to .d-md-none
• .hidden-lg-up to .d-lg-none
• .hidden-xl-up to .d-xl-none
• .navbar-toggleable-sm to .navbar-expand-sm
• .navbar-toggleable-md to .navbar-expand-md
• .navbar-toggleable-lg to .navbar-expand-lg
• .navbar-toggleable-xl to .navbar-expand-xl

Improved auto-placement of tooltips, popovers, and dropdowns

Bootstrap 4 no longer uses Tether.js. This library was replaced by library called Popper.js

This article was originally published on our website: genesisui.com

How to upgrade bootstrap 4 alpha 6 to bootstrap 4 beta

About Me

My name is Lukasz Holeczek. I’m creator of GenesisUI and CoreUI. You can connect with me on Twitter, Facebook, and LinkedIn.