1. Moving from Less to Sass
Bootstrap was initially written with Less but recently Sass has grown to be the leader in CSS pre-processors. After few years the developers decided to use Syntactically Awesome Style Sheets.
Bootstrap 4 compiles faster than previous version. Becoming part of huge Sass community has additional benefits. Right now all components, mixins and elements can be extended much easier .
2. Better grid system
Grid system is differs from the initial release. This version targets mobile devices with @media-queries. Now you have full control when you are using Mobile First approach with Responsive Web Design. Check code listed below:
// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }
These @media-queries will cover huge bunch of devices, starting from small phones, through tablets, and finishing on large desktop screens.
3. Flexbox support
Finally developers will be happy, because Bootstrap 4 uses display: flex; instead of float property. Input groups were changed from display: table; to display: flex; also. This feature simplifies vertical alignment of content within a parent element. Reordering of the content across devices and creating equal height columns will be now much easier.
This is an optional feature, so if you need IE9 support, just forget it! To use Flexbox change $enable-flex variable from false to true in _variables.scss file. When you don’t need the source Sass files, you may simply choose the right package on Bootstrap 4 download page.
4. New components
Cards is a totally new component, which replaces the old panels and wells. Bootstrap creators designed Cards as flexible and extensible content container.
Cards Groups and Cards Decks are especially worth checking, because they easily display containers of the same height when content has different length. All this is possible with Flexbox.
5. Reboot
Default browser styling compatibility was a big problem for many years. Eric Meyer proposed reset method to reduce browser inconsistencies. Modern and better alternative created by Nicolas Gallagher, namely, Normalize.css, doesn’t resets all styles, but it targets only the styles that need normalizing.
Imagine a new module which allows to reboot styles with more opinionated resets. Using box-sizing: border-box, margin tweaks, and more in a single Sass file is the next step for better control.
6. Customization
Sass offers much more with its superpowers such as variables, mixins and operators. That was the reason to move all gradients, transitions, shadows, and more into Sass variables. It doesn’t have to be a separate stylesheet file as it was in Bootstrap 3. Below are listed variables for optional features:
$enable-flex: false !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; $enable-transitions: false !default; $enable-hover-media-query: false !default; $enable-grid-classes: true !default;
This New approach redelegates all customization options to simple configuration. Change one variable and recompile stylesheets to enable or disable rounded corners in the whole theme. Check available options in _variables.scss file to see how much easier it is to run customization in Bootstrap 4.
7. Dropping IE8 support
For many years Internet Explorer blocked real web development. Older programmers remember painful hacks and tricks for non-standards IE6 set up. This popular browser is getting better with each version, but not as fast as other modern browsers.
Dropping support for IE8 is a chance to take advantage of the best CSS parts without hacks and fallbacks. Relative units like rems and ems will help to easier create responsive typography and components sizing. You can use Bootstrap 3 if you need IE8 support.
Ending IE8 support makes using jQuery 2.0 with Bootstrap safer. jQuery 2.0 is smaller, faster and has more features too.
8. JavaScript improvements
Bootstrap 4 will support ES6 which won’t be interesting for most users, but developers will get many enhancements. The code of plugins has been written in ES6 and compiles with Babel. All this simplifies the maintenance process.
Developers decided to support UMD for JavaScript. Since CommonJS and AMD styles have both been equally popular, they had a problem of deciding which one was better. Universal Module Definition was created to support both, and old-style with global variable too.
9. Improved tooltips and popovers
Bootstrap 4 has many components, and some of them require enabling JS. Tooltips and popovers are placed in parent elements. For better auto-placement and performance the developers used Tether.
This tool, created by the team at HubSpot, helps to efficiently attach these elements in the page which were positioned absolutely.
10. Improved documentation
All new features were added to documentation. The existing features were updated. The whole documentation was written in Markdown. Search form helping to find interesting parts is an additional improvement.
Conclusion
Release date of stable Bootstrap 4 isn’t known at this moment, but even the alpha version is still exciting. If you plan to use new features there is still time to get familiar before the launch, because the developers will focus on fixing issues and testing framework for the next weeks and months.
Another great message announced says: Team won’t stop Bootstrap 3 branch development. It’s good to hear that the developers learned something after dropping 2nd version when v3 was launched.