Bootstrap 4 Beta 3 - The Last Beta of Bootstrap 4 is Here

This is exciting!!! On 28th December 2017, the final beta version of Bootstrap 4 was released. So the much anticipated stable V4.0.0 is just around the corner.

Bootstrap is a very popular front-end framework that helps create mobile-first, responsive web applications quickly and easily. The advantages of Bootstrap include high customizability, easy to use, easy to learn, awesome grid system, amazing support, a huge community behind, and of course being mobile-first and responsive. Bootstrap is basically a lifesaver for many developers.

The version 4 of the Bootstrap has been under development for over two years now. This was a long wait since the first alpha release on 19th August 2015. Bootstrap 4 brought some major changes to the framework and all the good ones. And hence, Bootstrap 4 is the most awaited version.

Now that beta 3 is released, for all those people who have started with Bootstrap 4 already, Beta 3 has some breaking changes since the last beta. Check out the beta 3 ship list for the detailed information about the changes in the latest release and visit the official blog to know what's new and coming.

But the good news is the final stable version will not bring any more breaking changes to it. So it would be safe to update your work to Bootstrap 4 beta 3 and be prepared for the final release. The final stable version is likely to be released in a matter of weeks after the beta release.

What changed in Beta 3?

Beta 3 brings a little more changes than expected. But with a promise that there will be no more breaking changes in the final stable version. The changes in Beta 3 applies if you are migrating from Beta 2 to Beta 3, or any of the older versions of Bootstrap.

Beta 3 primarily focuses around our forms, but it also includes key fixes to tables, some global styles, our documentation, and some JavaScript bugs. Following this release, we’ll address a few issues and PRs before doing a stable v4 release a week or two into the New Year.

Rewrote native and custom check controls

The <input> and <label> has been removed to simplify the markup for both browser default and custom checkboxes and radios. Now, all the checkboxes and radios have parent <div> and sibling <input> and <label> pair.

Also, the custom checkbox and radio elements no longer have a .custom-control-indicator. This is generated from the new .custom-control-label.

Rewritten Input Groups

The input groups are rewritten with specific .input-group-{prepend|append} classes.

The responsive classes are once again parent classes

The responsive classes are once again parent classes to avoid accessibility issues with a changing <tables>'s display.

Deleted Class

The class .col-form-legend has been deleted and its styles have been consolidated into the .col-form-label class.

There are more changes and some features that come with the beta. To know more about them, go to the Bootstrap migration documentation.

What are the major changes in the framework till now?

Bootstrap 4 is a major rewrite of its predecessor. It has many changes that changed the landscape of the framework. The changes made the framework all the more powerful, easy to use and have made development easier and quicker.

For those who have not started with Bootstrap, now would be a great time to start. Not just because how awesome Bootstrap 4 is, but also because the Bootstrap team has now stopped the development of Bootstrap 3 but will keep on to maintain and support the version.

1 - From Less to Sass

Bootstrap 4 moved from Less to Sass as CSS preprocessor. This makes Bootstrap compile much faster. Also, Sass is very popular among developers and has a huge community of behind it.

2 - Flexbox by default

Flexbox is a powerful CSS tool that provides more control and flexibility in the component layouts. It makes creating a responsive web application very easy. Until Bootstrap 3 flexbox was opt-in.

Being flexbox, it is now very easy to create rows of equal width, cards with equal width and height, the flexbox utility classes make changing the display, direction, alignd rem as the primary CSS uniment, scaling etc. very easy.

3 - Relative CSS Units

Bootstra[ moved from pixels to em ants. This ensures better responsiveness of typography and ensures that the Bootstrap site will scale to work with devices of any screen size.

Since the viewports of a device cannot be defined using relative CSS units, grid breakpoints, media queries, and container widths still use pixels.

4 - Improved Grid System

Bootstrap has a very powerful, sophisticated grid system that makes creating a responsive application a very easy task. Before the version 4, Bootstrap had a 4 tier grid system. Bootstrap 4 introduced another breaking point for the extra small devices which makes a 5 tier grid system in the latest version. Bootstrap 4 is now mobile first, so the grid system has now a new great point that starts with the extra small devices and then scaling up.

5 - The Improved Navbar

The navbar in Bootstrap 4 has been completely rewritten in flexbox. Navbar utilizes flexbox utilities to give better built-in responsive behavior.

6 - Drops IE9 Support

Going flexbox by default came at the cost of dropping the support of IE9. If you need support for IE9, then you can continue using Bootstrap 3.

7 - Cards instead of wells, thumbnails, and panels.

The wells, panels, and thumbnails have been replaced by cards. The cards are built with flexbox of course, so it is very easy to create cards of equal height and width. And with the flexbox utility classes, it is very easy to manipulate the layout of the cards.

8 - Tooltips and Popovers

Bootstrap 4 used a third party library called tether for the positioning of the tooltips and popovers. In the later beta release Bootstrap 4 uses another third party library called Popper.js for the purpose of positioning of tooltips and popovers.

Recommended reading: How to Use Bootstrap 4 with Angular

So is it okay to use the final beta in a production environment?

Now that the final beta has come and the stable version can be expected within a couple of weeks, it is good to go to be used for development. The stable version is not going to bring any breaking changes so you can start using Bootstrap 4 to build your website. You can test with the beta version so that when the stable version finally comes you stay up to date with the framework.