After two years of making and breaking, Bootstrap 4 beta is finally out. The last major Alpha release was Bootstrap 4 Alpha 6 almost 7 months ago. So what's changed in first beta release? If you have code written in Alpha 6, you may need few tweaks to make it compatible with Bootstrap 4 Beta.

Quick Fixes

The quickest and easiest way to upgrade from Alpha 6 to Beta is find-n-replace of following classes in Bootstrap 4 Alpha 6 HTML code:

  • bg-faded to bg-light
  • card-inverse to text-white
  • card-outline-* to border-*
  • card-block to card-body
  • bg-inverse to bg-dark
  • badge-default to badge-dark
  • card-(color) to bg-(color)
  • navbar-toggleable-* to navbar-expand-* (shift up 1 tier)

Above changes will almost do the 70% of upgrade work. The remaining changes are about new utility classes introduced in beta to help create responsive design.

Display Utilities

New self-explanatory visible and invisible classes are introduced. Display utilities (d-none, d-flex, d-inline etc.) are now responsive (for example, d-sm-flex, d-lg-block, etc.).

Bootstrap 4 Alpha 6 hidden-* classes can be converted to beta version as following:

  • hidden-xs-up to d-none
  • hidden-sm-up to d-sm-none
  • hidden-md-up to d-md-none
  • hidden-lg-up to d-lg-none
  • hidden-xl-up to d-xl-none
  • hidden-xs-down to d-none d-sm-block
  • hidden-sm-down to d-none d-md-block
  • hidden-md-down to d-none d-lg-block
  • hidden-lg-down to d-none d-xl-block

Read more about display utilities in Bootstrap 4 beta.

Column Order & Offsets

Before Bootstrap beta, offset-*-* classes were used for column offsets. These classes are replaced with ml-auto (pull to the right) auto margin utilities. Similarly, the column ordering pull-*, pull-* classes have been replaced with new flexbox ordering utilities classes. Also, flex ordering classes (flex-first, flex-last, etc.) have been replace with order-n where n is numeric flexbox order (1-12).

For example, the following code in Alpha 6:

<div class="col-12">1</div>
<div class="col-sm-12 flex-first flex-sm-unordered">2 (1 xs)</div>

will become following in beta:

<div class="col-12 order-sm-1 order-2">1</div>
<div class="col-sm-12 order-1">2 (1 xs)</div>

Popper.js

Until Alpha 6, Bootstrap 4 relied on tether.js for tooltips and popovers. In beta, it is no longer required and has been replaced with popper.js. Include latest version of it in your project from CDN JS: https://cdnjs.com/libraries/popper.js .

Above instructions are only applicable if you are upgrading from Bootstrap 4 Alpha 6 to Bootstrap 4 beta. Want to upgrade from Bootstrap 3.x to Bootstrap 4.x beta? Here is a nice upgrade tool from Bootply team. It lets you upgrade Bootstrap 3.x code to Bootstrap 4.x beta.

What's coming in Bootstrap Beta 2?

Bootstrap team has created a ship list on what's coming in Bootstrap Beta 2. Follow the issue on GitHub to stay update what is going to change. Since, Bootstrap 4 is now in beta, which essentially means that there won't be any breaking changes in future releases until next major release (probably version 5).