What Designers Need to Know About Bootstrap 4

What’s new in Latest Bootstrap 4

Bootstrap, brainchild of Twitter, is a web design and development framework first released into our world four years ago.  

Using HTML, CSS and JavaScript, Bootstrap helps us design and build web projects suitable for a range of devices quickly and efficiently, and ensures that we always come out with beautiful, responsive results; hence why we’re so excited about this latest release. 

Also Check: 5 Open Source Tools for Web Developers

---

What’s new in Bootstrap 4 ?

Here are the top 5 new features we think are most exciting and important with Bootstrap 4:

Improved Grid System & Media Queries

Bootstrap 4 comes with an extra dynamic tier added to their grid system which allows you to better target those all important mobile devices. The HTML mark-up is still essentialy the same, but the .container width, breakpoints and gutter are defined in rems rather than pixels:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

---

More Sass, No Less

Bootstrap 4 is switching its preprocessor source from Less to Sass. This is good news for most front-end developers who regard Sass as the preferable choice; 

Sass now compiles much faster than Less, Bootstrap 4 which could be a slight issue for those who still prefer Less, however it is well worth jumping on the Sass wagon and taking advantage of its benefits; you may be pleasantly surprised.

---

Opt-in Flex Box

This is an optional extra (as it isn’t supported by IE9) but boy is it good. Simply by changing one Boolean variable to True and recompiling your CSS you can unlock a load of great benefits. All of your grid components will switch to using Flex Box without you needing to mess with any other settings at all.

---

Cards Are In

Bootstrap 4 is waving goodbye to wells, thumbnails and panels and replacing them with one all-encompassing superior feature: Cards.

Cards act as a sort of content container and allow you to easily create headers, footers, contextual background colours and tons of different types of content. Essentially, you’ll get access to loads of component options which allow you to build out your cards in any way you want; plus it works perfectly with Flex Box, if you chose to opt into that, as well as supporting the default grid mode.

---

Typography

Bootstrap 4 is replacing pixels with rems and ems in some places which will make responsive typography and component sizing much easier than before.

<h1 class="display-4">Display 4</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-1">Display 1</h1>

---

Internet Explorer 8

IE8 support is being dropped with Bootstrap 4, and for good reason. IE8 limits us as developers with CSS hacks and fallbacks, so dropping the support means we’re no longer being held back.

However if, like us, having IE8 support is essential for certain projects, then we would advise that you stick with version 3 of Bootstrap for them.

---

Other new features & changes include:

• New customisation options – embellishment options moved to Sass variables
• JavaScript plugins rewritten in ES6 – taking advantage of new JS enhancements
• HTML resets consolidated into new Reboot.css module
• Glyphicons support dropped
• 30% lighter than Bootstrap 3

Exciting, right? Download the Alpha Release here and keep up to date.