Bootstrap 4: What’s new?

On its fourth anniversary the new version of Twitter Bootstrap was released. In this post I’ll discuss what’s new in Bootstrap 4.

Bootstrap 4: What’s new?

Improved Grid System

In Bootstrap 4 (alpha) a new tier has been added to the grid system. With this new – smaller – tier Bootstrap 4 better targets mobile devices.

In the table below you can see a comparison of the Bootstrap 3 grid system with that of Bootstrap 4:

Bootstrap 3 Bootstrap 4
Device Class Class Device
Extra small less than 768px col-xs- col-xs- less than 34em Extra small
col-sm- 34em and up Small
Small 768px and up col-sm- col-md- 48em and up Medium
Medium 992px and up col-md- col-lg- 62em and up Large
Large 1200px and up col-lg- col-xl- 75em and up Extra large

Moved to rem and em units instead of pixels

With the release of (the alpha) version 4 of Bootstrap pixels have been swapped for rem and em where appropriate to make responsive typography and component sizing even easier.

With this move to rem and em the breakpoints in the grid system are also expressed in em: with the default font-size (in Bootstrap 4) of 16px a breakpoint of 768px translates into 48em, etc. (see in the table above).

As a consequence support for IE8 has been dropped. If you need IE8 support, keep using Bootstrap 3.

Cards have replaced Wells, Thumbnails and Panels

Cards are a brand new component in Bootstrap 4. But when you take a look at the Card component it might seem familiar. That’s because it shares features with the Bootstrap 3 components Thumbnails, Wells and Panels. But with the new Card component you can do a lot more.Below you can see the basic markup for a Card element:

Cards support a wide variety of content, including images, text, list groups, links, and more. In the demo below you can see an example with an image, text, a list group and links.

Demo - Card example

Dropped the Glyphicons font and the Affix plugin

No explanation given why these were dropped. Based on the Bootstrap 3 section about the Affix I already had the impression support for this plugin was a bit half-hearted.

Sass/SCSS instead of Less

While Bootstrap 3 was written in Less Bootstrap 4 uses Sass. For those used to Less the change to Sass will not be difficult because they are for the most part the same. Sass uses a different variable syntax (Less uses the @ character; Sass the $ character) but both languages nest the same. Compiling of the Bootstrap Sass files should go faster with Libsass.

Easier customization through Sass variables

With Bootstrap 4 a handful of global options have been added. You can easily customize all of the components with a simple change of the value of a variable in the _variables.scss file. E.g. you can enable/disable predefined border-radius styles, border-shadow styles, gradients and/or transitions.

HTML resets with Reboot

Reboot is a collection of element-specific CSS changes and builds upon Normalize. You can find all of the Reboot specifics here.

Flexbox support

Flexbox support has finally come to Bootstrap.

Flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:

  • Easy vertical alignment of content within a parent element.
  • Easy reordering of content across devices and screen resolutions with the help of media queries.
  • Easy CSS-only equal height columns for your grid-based layouts.

All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

If you want to know more about Flexbox I can recommend the article by Chris Coyier A Complete Guide to Flexbox and/or the article by Dimitar Stojanov A Visual Guide to CSS3 Flexbox Properties

To move Bootstrap into flexbox mode you need to:

  1. Open the _variables.scss file and find the $enable-flex variable.
  2. Change it from false to true.
  3. Recompile!

JavaScript plugins rewritten in ES6

To take advantage of the newest JavaScript enhancements all of the plugins have been rewritten in ES6.

Improved auto-placement of tooltips and popovers

Tooltips and Popovers now rely on the 3rd party library Tether for positioning. You must include tether.min.js before bootstrap.js (see cdn link below) in order for popovers and tooltips to work!

Add your comment