What's New in Bootstrap 4

Introduction

Last week, Bootstrap turned four years old, and its creators, Mark Otto and Jacob Thornton, released Bootstrap 4 alpha.

This alpha version is obviously incomplete still and shouldn’t be used just yet on production, but it does give us insight into all the cool new things that were added or updated. It’s also worth noting, that given this is an alpha release, everything and anything is subject to change.

As expected, this information is no longer 100% accurate since Bootstrap Alpha 2 was released. There have been some significant changes.

Looking Back at Bootstrap Over the Years

In a way, Bootstrap has shaped and driven standards over the years - especially mobile development. It enabled developers to either prototype quick and dirty sites or extend and build completely custom, rock-solid websites.

It’s a little crazy to think about, but just 4 years ago when Bootstrap 1.0 first came out, it wasn’t even responsive and had gradients for their gradients.

With the release of Bootstrap 2.0, they went fully responsive (but still technically optional), and they slowly started phasing out Internet Explorer 7 support.

They then released Bootstrap 3.0, finally killing off Internet Explorer support and slowly phasing out Internet Explorer 8. They also went “flat” and removed gradients, added a ton of new features, and upgraded their grid to be much more powerful.

Now, we’ve arrived at Bootstrap 4.0 which completely drops Internet Explorer 8 support. This means the front-end framework is no longer held back by legacy browsers and they can use better CSS3 techniques.

The framework still supports Internet Explorer 9, but IE9 supports just enough CSS3 things to not make it a huge problem. IE9’s biggest hold-up is its total lack of Flexbox support. Fortunately, the Bootstrap guys optionally added flexbox support. We’ll cover this more later.

In time, Bootstrap 5 will be here and we can probably safely say that Internet Explorer 9 support will be completely dropped freeing many front-end developers from the worst part of their job. It also will probably be built using PostCSS, but speculating about Bootstrap 5 right now isn’t important.

So what’s new in Bootstrap 4? Let’s find out! The docs aren’t 100% complete yet, but we can still learn what’s new from looking into the source.

Getting Started

Right now, since we’re only in Alpha, to get started with Bootstrap 4 you need to head over to the v4-dev branch and choose the way you want to start messing with it.

Bootstap’s Default Sass Way (advance way)

From here you can clone the repository, run grunt, and start messing around. The process will go something like this:

    # Clone the repo
    git clone https://github.com/twbs/bootstrap

    # Navigate into the directory
    cd bootstrap

    # Fetch remote branches
    git fetch

    # Switch to the version 4 development branch
    git checkout v4-dev

Next, you’ll want to use their Gruntfile to compile your Sass. You need to make sure Node and Grunt are installed.

After that, run these commands from within the /bootstrap directory:

    npm install
    npm install grunt
    grunt watch

Grunt is now doing a ton of things (probably more than you normally care about). It’s watching your scss/ folder for changes, it’s watching JS folders, and more.

Compiling with Grunt takes about 10 seconds! If you don’t care for everything that it’s doing, it might be easier to just integrate the Sass files into your normal preprocess setup.

CDN Way (the easy way)

An easier way for you to get started would be to just use CDN links. Since this is only in alpha, there’s probably not a good resource for it just yet.

You can just use our links served via Cloudflare CDN. Fair warning, these won’t be around forever and you can’t do any of the cool SCSS compile things.

We also provided you a flexbox compiled version to mess with as well:

    https://cask.scotch.io/bootstrap-4.0.css
    https://cask.scotch.io/bootstrap-4.0-flex.css
    https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js

Goodbye Less, Hello Sass

Bootstrap’s source is now Sass! In all versions, it used Less as its main preprocessor. It wasn’t even until version 3.0 that a Sass port was created.

This is great because Sass tends to be favored by front-end developers. It also compiles faster thanks to Libsass.

From the looks of it, it doesn’t seem like there are currently any plans for a Less version or a Less port. This is kind of a bummer since in some cases I actually prefer Less (or have just grown very used to it). Hopefully, a port is created and maintained.

Improved Grid System based on “rems”

Using the Bootstrap grid still follows the same HTML syntax, but the underlining architecture changed quite a bit.

For example, you still can create your advance 12-columns grids like so:

Or, use container-fluid for full-width rows:

Or, even nested rows:

You’re probably way too familiar with all this, but it’s worth noting again. The main difference is the way the spacing is done.

A container now has max-width set in rems. A row now has default negative left and right margin of -.9375rem, while columns have default left and right padding of 0.9375rem. These values were previously 15px in Bootstrap 3. These new rem values are almost the same as that.

You can inspect element on the demo below to see this in action:

See the Pen Bootstrap 4 Grid rem Demo by Nicholas Cerminara (@ncerminara) on CodePen.

We’ll explain rem a little bit more later, but the main thing to take away is everything is dynamic and relative to the root HTML tag.

For example, change the html CSS font-size to a different number in the demo above and watch how the entire grid adjusts and scales.

This is going to be extremely useful for supporting basically any size device - however small or large (4k…) much quicker. It’s definitely going to take some getting used to though, especially front-end people working off pixel-based PSDs who are used to just copying over exact sizes.

An Opt-in Flexbox Grid

Internet Explorer 9 doesn’t support Flex Box, but it didn’t hold the makers of Bootstrap back from adding this to version 4. It’s just optional.

There’s a boolean variable in the _variables.scss file called $enable-flex. If you set this to true and recompile, a ton of things happen.

All grid components immediately switch to using flexbox and you don’t even need to adjust your HTML syntax. It simply just works. It’s unclear at this point if they’re going to expand on this to allow for more complex “gridding”, but it doesn’t matter because you get a ton of added benefits.

One of these benefits is matched heights of columns with flexbox. No longer would you have to use something like Match Height.

It simply works. Check out this demo where the two different grid systems get toggled:

See the Pen Bootstrap 4 Flex Box Grid Demo by Nicholas Cerminara (@ncerminara) on CodePen.

Improved Media Queries

Bootstrap 3’s media queries always frustrated me although I appreciate their intention and design. Here’s what they used to be:

    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

This was always a little frustrating because weird things would happen based on if you were using col-md-* or col-sm-* and it never felt complete or right.

I even went far enough to use my own version of media queries here that gets a good small amount of traffic, but, in reality, I always ended up doing something like this if it wasn’t mobile-first:

    /* https://www.digitalocean.com/community/tutorials/default-sizes-for-twitter-bootstraps-media-queries */

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {}
    @media only screen and (max-width : 1199px) {}

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {}
    @media only screen and (max-width : 991px) {}

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {}
    @media only screen and (max-width : 767px) {}

    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {}
    @media only screen and (max-width : 479px) {}

    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {}

This covers all the bases, makes sure I’m able to hit different common devices at exact device widths, and allows you to make adjustments based on different column sizes at every width.

Obviously this sucks, and you can see why this is zero fun and a huge painful approach. Fortunately, Bootstrap 4 hit the nail on the head with media queries.

Here’s how they work for a mobile-first approach:

    // Extra small devices (portrait phones, less than ???px)
    // No media query since this is the default in Bootstrap

    // 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) { ... }

Or, if you’re going desktop first:

    // Extra large devices (large desktops)
    // No media query since the extra-large breakpoint has no upper bound on its width

    // Large devices (desktops, less than 75em)
    @media (max-width: 74.9em) { ... }

    // Medium devices (tablets, less than 62em)
    @media (max-width: 61.9em) { ... }

    // Small devices (landscape phones, less than 48em)
    @media (max-width: 47.9em) { ... }

    // Extra small devices (portrait phones, less than 34em)
    @media (max-width: 33.9em) { ... }

This is great because you can see that they actually added the ~480px breakpoint to the default. This gives us that extra level of control.

These are also configurable with Sass, so you can technically pick and choose your own break-points here:

Cards

Cards replace Bootstrap 3’s old panels and wells.

Cards are defined as a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

They’re essentially individual content blocks with a ton of out-of-the-box options.

Here are some demos showcasing all the different things you can make with cards:

See the Pen Bootstrap 4 Cards Demo by Nicholas Cerminara (@ncerminara) on CodePen.

The big thing to take away here is you get a ton of new component options to basically build these little card blocks however you want.

It’s also worth looking into the Card Groups and Card Decks in the demo. You’ll notice that even though their contents are different sizes, they’re all equal in height without JavaScript.

This works both with Flexbox and the default grid mode. If you’re using flexbox, the cards are built using flexbox properties. If you’re using the default grid, they’re actually using a CSS trick to avoid the need for JS. The container uses display: table; and each “card” is display: table-cell; making it have table properties (aka, equal column heights).

New Reset Component called Reboot.css

Previously, Bootstrap used Normalize.css as its CSS reset. Normalize is awesome and well-respected. With Bootstrap 4, they actually just take normalize.css, and add some Bootstrap things to it.

In layman’s terms, they combined their reset and base styles into a single file. This is useful because eventually, you could essentially use just reboot.css on its own.

You can check it out here.

Sass Variables for Customizing

Everything with Bootstrap 4 is about customizing - maybe more than any other version before. They’ve consolidated all the variable options to a single file where you can compile your Sass on the fly and with little effort. This used to be all previously done in a separate stylesheet.

There’s also a bunch of brand new customization options. You can take a peek at what it will look like here although they may streamline the process further to a different file.

You can custom things like:

• Colors
• Options (flexbox, transitions, rounded, shadows, etc.)
• Spacing
• Body (defaults)
• Link Styles
• Grid Breakpoints
• Grid Containers
• Grid Columns
• Typography
• Components
• Tables
• And more…

Dropped IE8 Support

IE8 support was dropped. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. It also means that the maintainers can focus on new technologies and pushing forward.

It’s currently unclear if there will be partial support with an HTML5 shiv and respond.js or not. It seems though that if you need Internet Explorer 8 support, you’ll have to stick to using Bootstrap 3.

JavaScript Improvements

ES6 Support

For most users, this won’t matter much, but all of the plugins have been written in ES6 and compiled with Babel. This means maintaining the plugins will be a lot easier.

UMD and AMD

UMD and AMD issues are resolved:

• AMD with concatenated JS file
• UMD Tests

Now safe to use jQuery 2.0!

Now that Internet Explorer 8 support is dropped. It’s safe to always use jQuery 2.0 with Bootstrap. jQuery 2.0 is smaller, faster, and has more features.

Added Tether to Tooltips

This is smaller, but Tether is integrated into Tooltips and Popovers for better auto-placement and performance. Tether is created by the team at HubSpot and defined as a client-side library to make absolutely positioned elements attach to elements in the page efficiently.

This means you have to include tether.js if you want Tooltips or Popovers to work.

New Quick Start Options

There are a whole bunch of new quick start options to integrate Bootstrap with your app. Some of these people have been doing for quite some time already:

Git

You can just clone (or download) from Github still:

    git clone https://github.com/twbs/bootstrap.git

Bower

You can install it via the Bower front-end package manager:

    bower install bootstrap

Node

You can install Bootstrap with the npm package manager:

    npm intstall bootstrap

Meteor

It’s nice to see some meteor love in there too:

    meteor add twbs:bootstrap

Composer

And you can install it with composer:

    composer require twbs/bootstrap

New Unit (rems) for Typography

This is probably the most confusing change in Bootstrap 4. So, before we even explain any of this, just know you can still use px, em, and even pt for typography. Nothing really changes if you don’t want it to.

Typography font sizing in Bootstrap 4 is done completely based on the rem unit of measurement. It’s actually a super easy concept to grasp. With rem, all font sizes are relative to the root element (i.e., the html tag).

So if you inspect element on a Bootstrap 4 page, you’ll notice the html tag has font-size: 16px on it. If you wanted your p tags to be that size, you could simply do:

    p {
        font-size: 1rem;
    }

If you wanted your h1 tags to be be 40px, it would just be this calculation:

    h1 {
        font-size: 2.5rem; /* 16 * 2.5 = 40px */
    }

The reason for this is to make it easier to scale up or down for devices. You could technically change the html tag to a smaller or larger size to scale all font sizes equally - which is a super nice feature.

Bootstrap 4 takes it a step further and bases their grid units off rem as well. This means when you change the html tag, you have 100% perfect scaling of the entire application - fonts, paddings, margins, etc. This can save you some serious lines of code when doing mobile.

This is all relatively new to me, and I’ll probably still use px for a while. It might make sense to override Bootstrap’s default html tag to be font-size 10px.

This way you can do your calculations way faster:

    html {
        font-size: 10px;
    }
    body {
        font-size: 1.6rem; /* 10 * 1.6 = 16px */
    }
    h1 {
        font-size: 4rem; /* 10 * 4 = 40px */
    }

I’ll be looking forward to reading more on it and figuring out what the recommended practice will be.

Display Headings

Display headings are like lead text for your headings. This allows you to give a nice custom “stand-out” style to any element.

There are four different sizes right now. The larger the number, the larger the heading size.

Here’s a visual example:

See the Pen Bootstrap 4 Display Heading Examples by Nicholas Cerminara (@ncerminara) on CodePen.

Inverse Tables

Tables now have an added table-inverse class for having another variation of a table. This is nothing crazy, but here’s what they look like:

See the Pen Bootstrap 4 - Table Inverse by Nicholas Cerminara (@ncerminara) on CodePen.

It’s definitely a nice to have. It currently has weird behavior though if you mix and match with table-striped or table-hover classes.

A 30% Smaller Footprint

Bootstrap 4 is 30% smaller than the latest Bootstrap 3 build! It previously was around ~123kb and now is a mere ~88kb. This is a huge reduction for not losing any features.

You can read about a discussion on Hacker News with @mdo about it here.

Outline Buttons

Bootstrap 4 has added some new button styles with “Outline Buttons”. Outline Buttons appear hollow or are simply inverses of a regular button.

The classes for them are really straightforward:

    Primary
    Secondary
    Success
    Warning
    Danger

And here’s a demo for you to see them in action:

See the Pen Bootstrap 4 - Outline Buttons by Nicholas Cerminara (@ncerminara) on CodePen.

Glyphicons Dropped

Bootstrap 4 also dropped Glyphicon support. Most people seem to be using FontAwesome anyway, but I wouldn’t be surprised if they also encourage alternatives such as Octicons.

Spacing Utility Classes

Another cool feature that was added is spacing utility classes. Spacing utility classes allow you to quickly add spacing in any direction via margin or padding using a utility class.

It works something like this:

These are super easy to use and remember. Here’s the pattern with some examples to get you going:

    [margin or padding]-[direction]-[size]

For Margin or Padding: use:

• “m” for margin
• “p” for padding

For direction, you can use:

• “a” for all
• “t” for top
• “r” for right
• “l” for left
• “x” for left and right
• “y” for top and bottom

For sizes, you can use:

• “0” for zero
• Leave Blank for default
• “auto” for Auto
• “md” for Medium
• “lg” for Large

“WTF, Forms” Integration

“WTF, Forms” are IE9+ forms created by one of the creators of Bootstrap. He’s now integrating them directly into Bootstrap core.

The syntax doesn’t seem to change much. You mostly get some nicer extra base styles. This doesn’t seem 100% complete yet so stay tuned!

Additional Responsive Embeds

This wasn’t originally in Bootstrap 3 and was introduced in one of the 3.x releases. The only upgrade we really get here is the super-wide 21x9 aspect ratio.

Check out the code samples below:

Conclusion

Even though Bootstrap 4 is only in alpha, it’s still really exciting. Bootstrap has come a long way.

There is currently no planned release date for Bootstrap 4, but you can follow along to the action here. Once this Pull Request merges into master, we’ll be good to go!

Bootstrap 3 will continue to be supported for critical bug fixes.

Here’s some additional resources:

• Bootstrap 4 Pull Request
• Bootstrap 4 Branch
• Bootstrap 4 Blog Post
• Bootstrap Official Themes
• Bootstrap 4 Alpha Docs