How to upgrade Bootstrap 4 alpha 6 to Bootstrap 4 beta

Saturday, August 12, 2017

Table of Contents

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 Bootstrap 4 beta

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.badge-default`	`.badge-dark`
`.bg-faded`	`.bg-light`
`.bg-inverse`	`.bg-dark`
`.card-block`	`.card-body`
`.card-block`	`.card-body`
`.card-outline-*`	`.border-*`
`.card-outline-primary`	`.border-primary`
`.card-outline-secondary`	`.border-secondary`
`.card-outline-success`	`.border-success`
`.card-outline-info`	`.border-info`
`.card-outline-warning`	`.border-warning`
`.card-(color)`	`.bg-(color)`
`.card-primary`	`.bg-primary`
`.card-success`	`.bg-success`
`.card-info`	`.bg-info`
`.card-warning`	`.bg-warning`
`.card-danger`	`.bg-danger`
`.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-xl-up`	`.d-xl-none`
`.navbar-toggleable-*`	`.navbar-expand-*`
`.navbar-toggleable-sm`	`.navbar-expand-sm`
`.navbar-toggleable-md`	`.navbar-expand-md`
`.navbar-toggleable-lg`	`.navbar-expand-lg`