New Features in Bootstrap 4 Alpha

On 19^th of August 2015 Bootstrap 4 alpha was released to the public, exactly four years after their first official announcement of Bootstrap v1 (what a coincidence right?).

Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: http://t.co/3OOsQ5T #kaboom
— Mark Otto (@mdo) August 19, 2011

The ever-popular front-end framework has had a complete makeover and, as a big fan of Bootstrap, I’m pretty excited to get my hands on some of the new features!

bootstrap homepage — The Bootstrap homepage

Having gone through around a year of development, 1,100 commits and 120,000 lines of code changed; there is a heap of changes and new features we can drool over. To save you all the trouble of scouring the change log I have compiled a list of features that I found interesting.

New Reset Module called “Reboot”

Let’s start where every framework starts, the reset module. Bootstrap’s new reboot module builds upon the traditional normalize.css and now moves all generic element selectors and reset styles into a single accessible scss file.

You’ll also notice a nifty trick, setting the traditional box-sizing: border-box to the html element, then globally to all elements via inheritance:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

This enables us to better override the setting (if required) without increasing specificity or using !important.

Credit goes to Jon Neal for the original idea and CSS-Tricks for the in-depth overview of this method.

Rems and Ems Rule!

In a move to help streamline the CSS, Bootstrap v4 alpha dropped IE8 support and a host of hacky CSS3 poly fills. By supporting IE9+ it’s been able to embrace some much loved CSS modules. One of these is the rem (root em) unit, which calculates font-size relative to the root element (html).

Taking rem units further, we can really start to delve into responsive typography. As all font sizing is based on our root element we can create media queries to alter sizes at different break points. Combine this with the new grid breakpoint mixins and voila!

An example of changing the font size across our website when viewed on extra small devices:

html{
    font-size:16px;
}

// Creates a media query for extra small devices (0 - 34em)
@include media-breakpoint-up(xs) {
	html{
		font-size:18px;
	}
}

Read more in Kezz Bracey’s Comprehensive Guide: When to Use Em vs. Rem.

Opt in Flexbox

Out of the box Bootstrap v4 won’t support Flexbox, instead utilizing more traditional float or display table methods. The lack of standard Flexbox integration helps toward the IE9+ support, however, if you’re willing to forego this support and bump it up to IE10+ you can enable Flexbox across your project. This is done by changing the boolean variable inside the _variables.scss file; your compiled css will now include Flexbox styles. Flexbox is used not only just on the grid, but also various other elements including the new card component, input groups and media components.

For Example

Let’s go over an example of where Flexbox helps us out. Quite often I will have a set of inline columns (as pictured below) where content in one of the columns will extend the height far beyond the other columns. A classic CSS dilemma. One of the many advantages of enabling Flexbox is that we can force the column heights to be equal. No additional CSS is required!

SCSS is the New Black

Oh, btw—Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.
— Mark Otto (@mdo) April 23, 2015

SCSS has usurped LESS as the CSS preprocessor of choice for Bootstrap v4. The entire CSS code base has been refactored as SCSS, with no official LESS port at the time of writing. Mark explained some of his reasoning in a tweet:

If you want reasons: more people use SCSS, libsass is crazy fast, syntax os more explicitly clear, and I'm lazy and use SCSS at GitHub.
— Mark Otto (@mdo) April 23, 2015

If you’re a big fan of the original LESS build, Mark has asked for some help in creating and maintaining the LESS port.

Cards, the Unified UI Element

Bootstrap v4 has cleaned up its components with the removal of the classic well, panel and thumbnail components. In their place a new component: cards!

The new card component has the familiar aspects of panels, such as titles, headers and footers, and rolls them all into a neat and flexible content container.

And there’s more:

Image Overlays and Backgrounds

You can set a card background with an image and overlay the card’s text and other content. This is done without any additional CSS by adding the following element within your card:

1	<img class="card-img" data-src="image.jpg" alt="Card image">

Adding the class card-inverse will set the font color to white allowing you to set a darker background if you desire.

Speaking of backgrounds, the traditional color variants can also be applied to the card and style the background accordingly. For example, card-primary will set the card to the primary color, so on and so forth.

Grouped Cards

In addition to the standard grid with gutters, you’ll also find the option to group cards together, remove the spacing in-between, then set each column to a uniform height. By default this is achieved by using display: table and table-layout: fixed, however if you have Flexbox enabled it will use display: flex instead.

Masonry Style Grid

The card component also comes with a masonry-like column configuration which allows cards to stack closely together based on available vertical space. This option is not supported in IE9–it requires IE10 and up!

More Utility Classes?!

Previous versions of Bootstrap have included various classes called “utility classes” to enable quick and easy adjustment of the content outside component-specific styles. Typically this has been restricted to some pretty basic changes, such as floating (pull-left, pull-right), color (.text-primary etc), clearfix (.clearfix) and a few others.

In Bootstrap v4 alpha we have access to a whole host of new utility classes around padding and margins. This possibly controversial move will enable users of Bootstrap v4 to quickly push and align content within uniform increments. Some users may feel utility classes are one step away from inline styles, however they do provide the ability to quickly and uniformly style a component without creating a specific selector to do so.

The margin and padding utility classes are created in multiples of a uniform spacer value. for example:

// $spacer is a sass variable that equals 1rem or 16px

.m-a-0 { margin: 0 !important; }
.m-a { margin: $spacer !important; }
.m-a-md { margin:  ($spacer * 1.5) !important; }
.m-a-lg { margin:   ($spacer * 3) !important; }

Here .m-a stands for margin on all sides. There are classes for individual sides, axes, different sizes (as denoted by -0, -md and -lg) and for padding.

Here is a look at some of the other classes:

// Apply standard padding to all sides
.p-a { padding:        $spacer !important; }

// Apply standard padding to the top
.p-t { padding-top:    $spacer-y !important; }

// Apply standard padding to the right
.p-r { padding-right:  $spacer-x !important; }

// Apply standard padding to the bottom
.p-b { padding-bottom: $spacer-y !important; }

// Apply standard padding to the left
.p-l { padding-left:   $spacer-x !important; }

// Apply standard padding to the x axis (right and left)
.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }

// Apply standard padding to the y axis (top and bottom)
.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }

The idea here is to reduce the amount of highly specific custom classes created to nudge the content, instead rolling them into a uniform and consistent method of content alignment.

I had a chat to Mark Otto (@mdo co-creator of Bootstrap) on their public Slack channel and discussed the use of these classes, he said:

“We found ourselves needing them, and often overriding the default values for many components. Margin and padding seem to be the most commonly overridden properties (along with color and font)." - Mark Otto

Other Worthy Mentions

There are quite literally hundreds of new features and updates to the existing code base, too many to go over in fine detail. So here are a couple more that didn’t make my major list, but still are worth mentioning.

New Documentation

The Bootstrap v4 documentation has had a refresh. There is a slightly different structure in which the features are broken down into layout, content and components. What I quite like about the new documentation is that each component has its own page, making it easy to link to and also play around with resizing the page to test responsiveness.

New Grid Tier

Bootstrap 4 has a new grid tier to target smaller devices (under 480px wide), this breakpoint has taken the name of the previous smallest class (.col-xs-XX). In doing so all the grid tiers have moved up a notch, thereby creating a new largest tier called .col-xl-XX for the previous lg.

As mentioned in the conversion to rem and em, the Bootstrap team have added new mixins to quickly create breakpoints around the existing breakpoints. They can be used with the following syntax:

// Creates a media query: @media (min-width)
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Creates a media query: @media (max-width)
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }

No More Icons

Glyphicons have been removed from the build; Bootstrap 4 documentation will eventually include instructions on how to include 3rd party icon packs such as Font Awesome and Octicons.

JavaScript Rewrite

All of the JavaScript plugins have been rewritten in ES6 to take advantage of the latest specification. You might notice some plugins removed (such as the affix plugin) as they continue to rewrite and build out the new library.

What’s Next?

So that's my list of some of the cool new features added in Bootstrap 4 alpha. If you would like to check out the entire change log thus far take a look at @mdo's git pull request for Bootstrap 4.

I’m sure there’ll be a heap of changes to still come as the team work out all the kinks. Their development plan includes the following milestones

A few more alpha releases to address items raised by the community
Two beta releases once the features have been finalised.
Two release candidates (RCs) to make sure it’s all polished ready for the final push.

There is no word on when these will be released, much like the previous builds it will come down to when the library is ready. In the meantime, get bootstrapping and help them track issues and provide general feedback through their bug tracker!