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.
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:
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.
invisible classes are introduced. Display utilities (
d-inline etc.) are now responsive (for example,
Bootstrap 4 Alpha 6
hidden-* classes can be converted to beta version as following:
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-* classes have been replaced with new flexbox ordering utilities classes. Also, flex ordering classes (
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>
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).