Quick look at Bootstrap 4 (Alpha 5)

Bootstrap, the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first websites, is going through a systematic overhaul in it’s fourth iteration.

The project is still a work in progress. It’s currently in its Alpha(5) state. Devs are still rewriting code, squishing bugs, and streamlining the looks, which means that it’s not ready to be used on production just yet. However, that won’t stop us from taking a peek at what’s been done so far.

In this article we will take a quick look at the most important changes and improvements to the Bootstrap framework.

Less -> Sass

Until now, Bootstrap has used Less as its main CSS prepocessor, however that is about to change with the release of Bootstrap 4. Less is being replaced with Sass, which is more popular, has more users, and offers more possibilities.
It’s worth mentioning that Bootstrap 3 also has a Sass version (ported from Less). Who knows, maybe we will see something similar with Bootstrap 4, a Less version ported from Sass (no confirmation on this yet).

Smaller footprint

Bootstrap 4 has made a noticeable improvement to its overall size compared to the latest Bootstrap 3 build.
bootstrap.min.css which was previously around ~121kb is reduced to ~105kb. This is a substantial size reduction for not losing any features.

Dropped IE8 and iOS 6 support

Bootstrap v4 now supports only IE9+ and iOS 7+.
For sites needing either of those you should use v3.
After the release of v4, v3 will still get critical updates and bugfixes, so there will be no downsides to using it, unless you can’t live without some of the new features the v4 has to offer.

Reboot

Reboot is a new module that builds upon Normalize. Its job is to provide an elegant, consistent, and simple baseline to build your own theme upon. In other words, it adds some basic styling to all HTML elements.
Selectors appearing in this file only use elements (no classes). This isolates reset styles from component styles for a more modular approach.

You can read more about Reboot here.

px -> rem

Bootstrap 4 is making a switch from px to rem as its primary CSS unit. It’s important to point out that despite the switch, pixels are still used for media queries and grid behaviour as viewports are not affected by type size.

This change will make it easier to properly scale Bootstrap websites for all devices.
For example, you could just change the html tag font size to scale all typography, margins, paddings, and gutters accordingly – an awesome feature indeed!

Grid updates

New grid tier for smaller screens

Bootstrap 4 adds a new sm grid tier below 768px for more granular control, meaning there are now five total tiers. We now have xs (<544px), sm (≥544px), md (≥768px), lg (≥992px), and xl (≥1200px) grid tiers. This also means every tier has been bumped up one level (so .col-sm-6 in v3 is now .col-md-6 in v4).

Breakpoint specific grid gutters

Now you can customize the width of your gutters across every grid tier by modifying the Sass map.

More details about the new grid system can be found here.

Flexbox Support

Bootstrap 4 has an built in flexbox grid.
It isn’t used by default, so you will have to enable it manually. There’s a boolean variable in the _variables.scss file called $enable-flex which you need to set to “true”, if you want the flexbox grid enabled.

Read more about the new flexbox grid system here.

Panels, thumbnails, wells -> Cards

Panels, thumbnails, and wells have been dropped for a new all-encompassing component, cards.

Check out more info about the new cards component here.

Utilities

Lot’s of changes and improvements have been done to the existing utility classes.

There were also some new classes added, most notably spacing classes. They allow developers to quickly change paddings and margins on HTML elements.

The syntax is quite straightforward, for example adding the .ma-0 (margin all 0) sets margins to 0 on all sides of the given element. While margins use the m- prefix, paddings are styled with the p- prefix.

Full list of all utility classes can be found here.

_custom.scss

There’s a new _custom.scss file in the scss folder.
You can edit all Bootstrap default variables here.
Basically, you just copy the _variables.scss file contents to the new _custom.scss file where you can change them to your hearts desire, without the fear of losing any of the changes you made, when you update Bootstrap to a newer version.

Glyphicons dropped

Glyphicons have been dropped. They haven’t been replaced with any other icon font set, meaning that you will have to use some other 3rd party solution, for example Font Awesome or Octicons.

JavaScript improvements

JavaScript plugins for the new release have been refactored using EcmaScript 6.
AMD and UMD issues have been resolved.
Another thing that is important to mention is that it’s now safe to use jQuery 2.0 with Bootstrap, since IE8 support has been dropped.

All of the mentioned JS changes will make Bootstrap 4 run more smoothly than ever before.

Conclusion

These are just some of the changes and improvements to the Bootstrap framework.
For a more conclusive list, check out the Bootstrap 4 migration guide.

The Bootstrap 4 Alpha build is available for download from Bootstrap’s development website. The source code is also available on Github.

NOTE: I will be updating this article as new Bootstrap 4 versions get released, up until the final, production ready build.

24 October 2016 – Updated with Bootstrap 4 Alpha 5 changes.