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
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
rems instead of pixels
rems are now everywhere, except for media queries and grid behaviours, which increases flexibility and responsiveness.
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.
Padding and margins can be controlled by using the
m-* classes. They apply spacing from
3rem via numbers from 0 to 5, and you can also add the
l suffixes for spacing on specific sides (top, bottom, right, left).
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.