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.

Table of Contents

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


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


About the Author

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to migrate CoreUI React Templates to Vite
How to migrate CoreUI React Templates to Vite

How to check if a key exists in JavaScript object?
How to check if a key exists in JavaScript object?

Mastering JavaScript List Comprehension: The Ultimate Guide
Mastering JavaScript List Comprehension: The Ultimate Guide

The Best Bootstrap Alternative for Developers in 2025
The Best Bootstrap Alternative for Developers in 2025

How to change opacity on hover in CSS
How to change opacity on hover in CSS

How to Center a Button in CSS
How to Center a Button in CSS