How to upgrade Bootstrap 4 alpha 6 to Bootstrap 4 beta
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
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 |
Improved auto-placement of tooltips, popovers, and dropdowns
Bootstrap 4 no longer uses Tether.js. This library was replaced by library called Popper.js
