Since it was released four years ago, Bootstrap has taken the web design world by storm. So much so that a bare Bootstrap site has come to be a byword for quick and easy — or lazy — design.
Bootstrap’s popularity stems from its easy-to-use grid, but in the modern web design space, you can’t throw a stick without hitting a grid framework. Its popularity is maintained because of its plethora of extra features, from sane CSS defaults to user interface elements that make it relatively straightforward to build a range of common site layouts.
With the recently released alpha for Bootstrap 4, the developers have more or less started from scratch, rewriting large chunks of the code, implementing new grid options, and giving the UI paradigm an overhaul that brings it in line with modern frameworks like Google’s Material Design Lite.
Let’s take a look at the changes Bootstrap 4.0 brings.
Earlier versions of Bootstrap were written for the CSS preprocessor LESS. It was a good choice at the time, but SASS offers better performance and the SASS community has burgeoned in the last few years. This won’t impact developers who simply want to build on Bootstrap — it’s available in a pure CSS version, but those who want to tinker with Bootstrap’s innards should familiarize themselves with SASS, which shouldn’t be too much trouble for anyone familiar with CSS.
Frameworks grids largely came about in response to the general absurdity of CSS’ default layout tools. Grids make it easy to think about and build complex layouts, and Bootstrap makes it easy to implement a responsive grid.
But CSS now includes some interesting layout tools that weren’t around when Bootstrap was first developed, particularly the Flexbox module. Flexbox allows designers to control the layout of elements within a container. By default, Bootstrap doesn’t use Flexbox, but switching to a Flexbox-based grid is as easy as changing a SASS variable.
There’s no sign of support for the CSS Grid Layout Module, but since it doesn’t have widespread browser support, that’s not surprising.
A New Reset
Previous Bootstrap versions relied on Normalize.css and a set of custom resets. 4.0 consolidates these into one SASS file called Reboot, which contains opinionated reset options intended to work well with Bootstrap.
If you’re familiar with Bootstrap, you’ll be right at home with talk of wells, thumbnails, and panels. In 4.0, that’s all gone, to be replaced by a new UI paradigm based on cards. In effect, cards allow designers to achieve the same thing as the older elements, and are best thought of as flexible containers for content, much like the cards in Material Design Lite.
Those are the highlights, but Bootstrap 4 includes hundreds of other changes you can check out in the release notes.