What’s New in Bootstrap 4 – and What’s Gone!

bootstrap 4

This month saw the long-awaited Alpha release of Bootstrap 4 following it’s announcement back in December 2014.

Coinciding neatly with it’s 4th birthday on the 19th August, this shiny new version of the world’s most popular web design framework promises to bring with it a whole bunch of great new changes and features, some of which we’re going to share with you today.

A bit about Bootstrap…

Before we delve into the exciting new changes that come with Bootstrap 4, here’s a little more about the software itself and why we like it so much.

Bootstrap, brainchild of Twitter, is a web design and development framework first released into our world four years ago. Since then it has practically shaped the future of web development and has become incredibly popular with front-end web developers the world over. Considering its highly intuitive features, yearly overhauls and impact on productivity, its popularity isn’t all that surprising.

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.

So what’s new?

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 sass

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, thanks to the new Libsass port.

One more thing: It is possible that there may not be a Less version or port in 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 (which, by the way, is quicker using Sass…) 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.

bootstrap opt in flexbox

One huge benefit to come out of this feature is that you will be able to leave Match Height behind; with Flex Box, all of your columns will automatically match themselves.

Cards Are In

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

bootstrap 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. You can also create card groups and decks. 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.

There are also additional ‘display heading’ classes for all those situations where one size h1 just simply won’t do!

<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

no support internet explorer 8It had to happen someday, and now it has. 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 in this way and can reap all the benefits of the best parts of CSS.

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

It’s also good to note that support for Bootstrap 3 will be maintained.

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



WRITTEN BY

Angela Roche

PUBLISHED IN

Digital