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|
|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
em where appropriate to make responsive typography and component sizing even easier.
With this move to
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:
<img class="card-img-top" data-src="holder.js/100%x180/" alt="Card image cap">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some text to build on the card title and make up the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
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-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 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.
To move Bootstrap into flexbox mode you need to:
- Open the
_variables.scssfile and find the
- Change it from
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!