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
tobg-light
card-inverse
totext-white
card-outline-*
toborder-*
card-block
tocard-body
bg-inverse
tobg-dark
badge-default
tobadge-dark
card-(color)
tobg-(color)
navbar-toggleable-*
tonavbar-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
tod-none
hidden-sm-up
tod-sm-none
hidden-md-up
tod-md-none
hidden-lg-up
tod-lg-none
hidden-xl-up
tod-xl-none
hidden-xs-down
tod-none d-sm-block
hidden-sm-down
tod-none d-md-block
hidden-md-down
tod-none d-lg-block
hidden-lg-down
tod-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).