Finally!! On August 10th 2017, Bootstrap 4 has its first Beta Release. Just 9 days short of completing 2 years of the first alpha release of Bootstrap 4, the first Bootstrap 4 beta version is out with 5 more alpha releases in between.
With long interval between each release and the last release, alpha 6, that came out more than 6 months ago, people have been wondering and asking when the next release would be. There was no official date set or any indication of when the release would be, what anybody could do was wait until it’s ready.
The Changes
Bootstrap 4 has brought a lot of changes to it. Majors ones!! The move from Less to Sass, improved grid system, changed CSS units, replacing components like wells, panels, and thumbnails with cards, going flexbox as default, and more other changes are introduced in Bootstrap 4
If you are not familiar with the changes in Bootstrap 4 read Bootstrap 3 Vs. Bootstrap 4: What’s New?
With every new release, the framework added something new and better. But since it was not recommended to use Bootstrap 4 alpha in production until a more stable version is released, all we could do was wait for one. We had started to get our hands dirty with Bootstrap 4 anyway though.
The latest release, Bootstrap 4 Beta also comes with a lot of changes packed with it. If you have already familiarized yourself with Bootstrap 4 or built something with Bootstrap 4 alpha, you might need to make some changes otherwise your design may break.
Let’s take a look at some of the changes with Bootstrap 4 beta
- Tooltips now depend on the library Popper.js instead of tether for positioning.
- Changes have been made in some class names and utility class names. Some classes have been renamed and some replaced. For example,
- use the class name
navbar-expandinstead of .navbar-toggleable, - renamed flexbox
orderutilities to better match the utility naming scheme ofproperty-value. - in grids, the classes push, pull, and offset has been dropped and replaced by .
order-modifier and margin utilities
- use the class name
- The color palette has been changed for the existing classes for colors, with the addition of new classes .
*-darkand.*-lightalong with the existing classes.
In Bootstrap 4 alpha 6, buttons look like this:
In Bootstrap 4 beta, buttons look like this:
- jQuery and Popper are in peerDependencies instead of dependencies. This is because they are not required only in certain portions of Bootstrap and not all.
- Changes in display and responsive utilities.
- The naming scheme made more consistent by renaming a lot of variables.
- Updated browser support for more recent versions.
Check out the Bootstrap 4 Beta 1 ship list to know all the changes in the new release.
Along with the changes in color scheme and the system fonts in the beta, the components and the documents have a fresh look too.
The landing page for Bootstrap has changed, the layout for the documentation now has a stickied navbar and sidebar, and a right sidebar with fixed position and a new table of contents.
Now that the beta version was released we can expect that there are no more major changes until the next version, Bootstrap 5. We can expect more bug fixes and improvements in the coming releases. The official announcement has to say this regarding the subject.
“…shipping a beta means we’re done breaking all your stuff until our next major version (v5). We’re not perfect, but we’ll be doing our best to keep all the classes, features, and docs URLs as they appear now in this release. We can always add more things, but we cannot take away.”
The Next Releases
Bootstrap 4 alpha 1 was released on August 19, 2017. Bootstrap 4 Beta 1 released almost two years later on August 10, 2017. And in between, there have been 5 other alpha releases. The alpha 6 was released on January 6, 2017.
Next, there will be one or two beta releases and there won’t be any more breaking down and building up of stuff. Since there are quite a few changes in the latest release, there would be a lot a bug fixes in the coming releases.
After the beta releases, there will be two release candidates before the final release of Bootstrap 4.0.0.
What Happens to Bootstrap 3?
The Bootstrap team has stopped the development of Bootstrap 3. However, Bootstrap 3 will continue to be maintained and supported. The entire focus of development is now in Bootstrap 4.
As it seems that there won’t be any major changes in the coming releases, it is quite safe to start using Bootstrap 4 or migrate to Bootstrap 4. But before you do, You should be familiar with the changes in the latest version and go through the Bootstrap 4 documentation.
However, those projects that are hard to migrate to Bootstrap 4 or those which still need the older version browsers can continue using Bootstrap.
Conclusion
The much awaited Bootstrap 4 beta version has come out. Long since the last alpha release, the newest release is full of improvements and changes.