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


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

Improved auto-placement of tooltips, popovers, and dropdowns

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

Vue.js Forge 3

Top React UI Component Libraries in 2023

Who’s NEXT?

Black Friday aka Black Week aka Bull Shit?