Probably if you are updated with the news abroad the front-end community you know that was released. But what actually was changed for us developers? Bootstrap 4.0-alpha6 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. This is great because Sass tends to be more favorable by front-end developers. It also compiles faster thanks to Libsass. 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 extensions. You can think of them as more of a language designed to make CSS more maintainable, themeable, and extendable. CSS programming 2- Flexbox Now that Bootstrap 4 has fully , the responsive grid is more powerful. The new enable you to create 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 embraced flexbox auto-layout columns any equal height columns odd numbers of columns half-unit columns 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 classes. This extra tier extends the media query range all the way down to . Eventhough the new XL tier would make one think it’s been added to support extra large screens, it’s actually the . 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. col-xl-* 544 px opposite 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 , , and even for typography. Nothing really changes if you don’t want it to. px em pt Typography font sizing in Bootstrap 4 is done completely based on the unit of measurement. It’s actually a super easy concept to grasp. With , all font sizes are relative to the root element (aka, the tag). rem rem html Explaining better, imagine yourself inspecting a inside a bootstrap project, you will realize that the default size is 16_px_. If you want your tags to be that size, you could simply do: h1 h1 h1{ font-size: 1 rem; } If you wanted your tags to be be 48px, it would just be this calculation: h1 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 tag using media queries to a smaller or larger size to scale all font sizes equally – which is a super nice feature. html 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 Cards panels wells 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 class. .col-size * => http://demo.tutorialzine.com/2016/11/boostrap-4-regular-vs-flex-grid/?1-basic-grid Check out better in this live example above

Abroad

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

What changed in Bootstrap 4.0 ?

Too Long; Didn't Read

Companies Mentioned

Yuri Ramos

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

What changed in Bootstrap 4.0 ?

Too Long; Didn't Read

Companies Mentioned

Yuri Ramos

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES