News: What’s New in Bootstrap 4

Bootstrap 4, in alpha for a couple of years now, was finally released this January. It introduces an array of new concepts, the most important of which we’ll go through below.

Better media queries

v3’s lowest breakpoint was xs, at 768px. It didn’t accommodate for screens narrower than that, which was often a problem for me. v4 introduces xl. It becomes the new 1200px breakdown, pushing the other breakdowns down and decreasing the range to 576px.

rems instead of pixels

rems are now everywhere, except for media queries and grid behaviours, which increases flexibility and responsiveness.

Flexbox

Rather than relying on floats like in v3, v4’s grids are now created with Flexbox. They still work in the same manner as before, but Flexbox introduces more flexibility, like the fact that you can rely on it to set the widths of columns automatically.

You also have the advantage of Flexbox classes. For instance, you can use the d-flex class to turn any element into a Flexbox container.

Spacing with p-* and m-* classes

Padding and margins can be controlled by using the p-* and m-* classes. They apply spacing from 0.25rem to 3rem via numbers from 0 to 5, and you can also add the t, b, r or l suffixes for spacing on specific sides (top, bottom, right, left).

Cards

A new component, card, replaces panels, wells and thumbnails. Cards are flexible and extensible content containers, with options for headers and footers, and various content display options.

There are of course many more changes, but these are the one which appeal to me personally. Do make sure to check out Bootstrap’s migration section for more information.