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

Top React UI Component Libraries in 2023

Who’s NEXT?

Black Friday aka Black Week aka Bull Shit?

React? We’ve got (no) problem. Top5 React issues.

CoreUI & Vue.js Forge… cause 1 is just not enough!