Upgrade Bootstrap 4 Alpha 6 to Beta
What’s New in Bootstrap 4 Beta
This article is the successor to my original “What’s New in Bootstrap 4”
On to Bootstrap 4 Beta!
It’s been 7 months since the release of Bootstrap 4 Alpha 6, and while we’ve all been anticipating the new beta?!, your old Alpha 6 code will need a few changes to make it Bootstrap 4 Beta friendly.
The easiest way is with a quick-n-dirty replace of the following classes in your alpha 6 markup…
- change
card-block
tocard-body
- change
bg-faded
tobg-light
- change
bg-inverse
tobg-dark
- change
badge-default
tobadge-dark
- change
card-inverse
totext-white
- change
card-outline-*
toborder-*
- change
card-(color)
tobg-(color)
- change
navbar-toggleable-*
tonavbar-expand-*
(shift up 1 tier)
That will take care if the major changes from alpha 6 to beta! You’ll find that the beta is really all about the new utility classes which come in handy for just about everything.
Another change from alpha 6 to beta are the responsive visibility utilities. They’ve changed a lot during the alpha, and now the beta offers up a seemingly stable solution.
There’s the self-explanatory visible
and invisible
classes. The display utilities (d-none
, d-inline,
d-block
, d-table
, d-flex
, etc..) are now responsive for varying display at different breakpoints. Some examples:
d-md-none
(display:none on medium breakpoint)d-none
(display:none on the default xs breakpoint)d-lg-block
(display:block on large breakpoint)d-sm-flex
(display:flex on small breakpoint)
To convert the old hidden-*
classes to Bootstrap 4 Beta, you can do the following, and remember d-*-block
can be swapped with the desired display class such as (d-*-inline
, d-*-flex
, etc..):
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
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
Popper.js
You’ll also want to note that tether which was needed to tooltips and popovers in alpha 6, has been replaced with popper.js. In beta, dropdowns, tooltips and popovers require popper.js to be included in your scripts. Grab it over on CDN js: https://cdnjs.com/libraries/popper.js
Offsets & Column Order
If your alpha 6 code uses column offsets (offset-*-*
) you’ll want to swap this with ml-auto
(push to the right) auto margin utils. Similarly, the column ordering push, pull classes have been replaced with the flexbox ordering utils to replace the old push-*
and pull-*
classes.
The alpha flex ordering classes (flex-first
, flex-last
, flex-unordered
, etc..) have been replaced with order-n
where n is the numeric flexbox order (1–12). So, in alpha 6 we had this:
<div class="col-12">1</div>
<div class="col-sm-12 flex-first flex-sm-unordered">2 (1 xs)</div>
Which in beta becomes this:
<div class="col-12 order-sm-1 order-2">1</div>
<div class="col-sm-12 order-1">2 (1 xs)</div>
Of course, migrating any Bootstrap 3.x markup to Bootstrap 4 Beta is a larger undertaking, and for that try the upgrade tool, which will show you the list of changes from 3.x to 4.x beta. If I have time in the coming days I may offer up a alpha 6 to beta converter on the same site so keep an eye out for that. Meanwhile, here’s the ongoing list of swaps for your alpha 6 markup…
Alpha 6 to Beta Changes:
card-block
tocard-body
navbar-toggleable-*
tonavbar-expand-*
(shift up 1 tier)navbar-inverse
tonavbar-dark
bg-faded
tobg-light
bg-inverse
tobg-dark
badge-default
tobadge-dark
card-inverse
totext-white
card-outline-*
toborder-*
card-info
tobg-info
card-success
tobg-success
card-warning
tobg-warning
card-primary
tobg-primary
card-danger
tobg-danger
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
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
What’s Next?
While you savor the new Beta, check out a growing collection of Bootstrap 4 articles & examples, or fiddle with the latest Bootstrap 4 at Codeply.