It was exactly 2 years ago when the creators of Bootstrap framework announced the first alpha release of Bootstrap 4.
It was a big release as there were lot of major changes which happened to the framework. You can read more about it here. Now after a period of 2 years and 6 more alpha releases, Bootstrap 4 Beta release is finally out. During the past 2 years, creators of Bootstrap literally broke the framework only to build a better one. To give you some perspective, they added 67,000 new lines of code and eliminated 82,000 lines which is quite significant.
Key Highlights of Bootstrap 4 Beta!
Beta release as you might be aware is considered one step away from the final release but is lot more complete than alpha releases. Beta release has full features as opposed to alpha releases. Bootstrap 4 Beta is now complete with features & docs. There might be further minor enhancements until the next major version.
- Moved from Less to Sass. Now you can get faster compilation time with Bootstrap because of Libsass. The second benefit of moving to Sass is that Bootstrap developers now have a bigger support community of Sass developers.
- Flexbox and a better grid system. Everything in Bootstrap 4 has been replaced with Flexbox. The source Sass code has been refactored with better variable handling, mixins and now makes use of maps. A new grid tier has also been added to cater to smart devices.
- Cards replace wells, thumbnails, and panels. Cards tend to be a whole new aspect of Bootstrap, but they’ll feel very familiar because they do nearly every thing wells, thumbnails, and panels did, only better.
- Consolidation of all HTML resets into an innovative new CSS module, Reboot. Normalize.css has been forked, losing some core CSS tweaks. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like
box-sizing: border-box, margin tweaks, and much more all-in just one Sass file.
- New set of customization options. Now you can style using Sass variables instead of a separate style-sheet. Style embellishments like grid classes, transitions, gradients etc can be done by just updating a variable and recompiling.
- No support for IE8, IE9 and older browser versions. Component sizing is now done using rem units for responsive typography and new CSS 3 support. If you still need support for older browers like IE8/IE9 then keep using previous version of Bootstrap.
- Improved auto-placement of tooltips, popovers, and dropdowns due to the assistance of a library called Popper.js.
- Redesigned and enhanced DOCS. The documentation is now lot better with various handy plugins to streamline examples and code snippets which will make understanding the docs way easier.
- NPM based build tools to simplify the process of developing & contributing to Bootstrap framework.
- And a whole lot! Personalized form controls, a revamped navbar, a new carousel, HTML5 form validation styles, countless responsive utility classes, brand-new component elements have also been included.
Throughout the alpha releases, Bootstrap 4 had a slightly different look compared to previous versions. But in Beta release, the components and docs have also been resigned.
Besides a unique color scheme and brand-new systems fonts, the framework now has a different layout for it’s documentation too. This beta release also has a new search utility – DocSearch, powered by Algolia.
For a detailed breakdown of all changes, please visit the official log at: Github.