What changed in Bootstrap 4.0 ?

Probably if you are updated with the news abroad the front-end community you know that Bootstrap 4.0-alpha6 was released. But what actually was changed for us developers?

First things first:

The alpha version is obviously incomplete still and shouldn’t be used just yet on production, they are still changing the syntax, adding and removing features, so it’s just a preview for you, I not recommend you to use yet in production projects, just in hobby projects to getting used.

Throwback to 2011, could even they imagined their framework became so important?

1- LESS to SASS

Bootstrap’s now uses SASS! In older versions, it used Less as its main preprocessor. It wasn’t even until version 3.0 that a Sass port was created.

Unfortunately in this update I just have the opinion gathered by the others, I’ve never used LESS just SASS, even though SASS and LESS are both very powerful CSS extensions. You can think of them as more of a programming language designed to make CSS more maintainable, themeable, and extendable.

2- Flexbox

Now that Bootstrap 4 has fully , the responsive grid is more powerful. The new enable you to create any number columns to fill the viewport’s width. This new “unit-less” grid can be combined with the classic 12-unit grid for seemingly endless possibilities. This means that , , or even are all possible with Bootstrap 4. Flexbox also means more control of both height and width.Obs.: If you didn’t know how to use flexbox correctly (like me) now it’s your time to get updated.

3- 5 Grid tiers ( XL is on the game)

Now there are 5 tiers (or breakpoints) to support typical portrait and landscape screen widths. Bootstrap 4 introduces a new grid breakpoint with the col-xl-* classes. This extra tier extends the media query range all the way down to 544 px. Eventhough the new XL tier would make one think it’s been added to support extra large screens, it’s actually the opposite. All the 3.x tiers slide up in 4.x, to fit in the new 544 px to 768 px tier at the bottom. While the old 3.x col-xs-* supported screen widths under 768 px, the new 4.x col-xs-* tier supports screen width under 544 px. This new smaller xs tier means improved support portrait smartphones.

4- Larger fonts, and improved REM sizing

This is probably the most confusing change in Bootstrap 4. So, before we even explain any of this, just know you can still use px, em, and even ptfor typography. Nothing really changes if you don’t want it to.

Typography font sizing in Bootstrap 4 is done completely based on the rem unit of measurement. It’s actually a super easy concept to grasp. With rem, all font sizes are relative to the root element (aka, the html tag).

Explaining better, imagine yourself inspecting a h1 inside a bootstrap project, you will realize that the default size is 16_px_. If you want your h1 tags to be that size, you could simply do:

h1{ font-size: 1 rem; }

If you wanted your h1 tags to be be 48px, it would just be this calculation:

h1{ font-size: 3 rem; /* 3 x 16 = 48 */ }

The reason for this is to make it easier to scale up or down for devices. You could technically change the html tag using media queries to a smaller or larger size to scale all font sizes equally – which is a super nice feature.

Probably this release is the one with the most major changes ever, so we need to seek for information everytime and share =)

5-New cards (replaces the 3.x panel)

replace Bootstrap 3’s old and . Cards are defined as a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

They’re essentially individual content blocks with a ton of out-of-the-box options.

6- Goodbye IE8!

IE8 support was dropped. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. It also means that the maintainers can focus on new technologies and pushing forward.

7- Basic grid was changed*

A cool new feature of the Bootstrap 4 grid is the auto-layout mode. It lets developers leave out the size of columns, making them automatically distribute the space in that row.

Sizeless columns share the available space equally, always filling up the entire row. If we want a column to be bigger or smaller, we can still do that with a .col-size class.

* => Check out better in this live example above