Upgrade Bootstrap 4 Alpha 6 to Beta

What’s New in Bootstrap 4 Beta

The Bootstrap 4 Beta docs also have a new look!

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 to card-body
  • change bg-faded to bg-light
  • change bg-inverse to bg-dark
  • change badge-default to badge-dark
  • change card-inverse to text-white
  • change card-outline-* to border-*
  • change card-(color) to bg-(color)
  • change navbar-toggleable-* to navbar-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 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
  • 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

Read more on Responsive Visibility in Bootstrap 4

Hidden Visible Display Matrix in Bootstrap 4

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 to card-body
  • navbar-toggleable-* to navbar-expand-* (shift up 1 tier)
  • navbar-inverse to navbar-dark
  • bg-faded to bg-light
  • bg-inverse to bg-dark
  • badge-default to badge-dark
  • card-inverse to text-white
  • card-outline-* to border-*
  • card-info to bg-info
  • card-success to bg-success
  • card-warning to bg-warning
  • card-primary to bg-primary
  • card-danger to bg-danger
  • 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
  • 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

What’s Next?

While you savor the new Beta, check out a growing collection of Bootstrap 4 articles & examples, or find out what’s coming in Bootstrap 4 Beta 2. You can also fiddle with the latest Bootstrap 4 Beta at Codeply.


Have fun with Bootstrap 4 ❤