Bootstrap 4 is Here! What’s New?

Bootstrap, one of the most popular front-end frameworks among web designers, recently launched its very eagerly awaited version 4! Let’s take a look at what’s new, what’s been removed, and what you can do with it.

We never stopped believing, and hope you didn’t either! Bootstrap 4.0.0 has finally landed! https://t.co/zFAOxpyhvD
— Bootstrap (@getbootstrap) January 18, 2018

Version 4.0.0

This iteration of Bootstrap, according to Mark Otto and the team, is a “major rewrite of the entire project”. That promises a lot of improvements, and also suggests there’s a lot to get your head around if you’re planning to migrate existing projects to this new version. There are no “breaking changes”, but there’s a lot to take in. Time to jump in and examine the most important features.

Bootstrap 4 is Here!

1. New: Flexbox by Default

Traditionally Bootstrap’s layout has been powered by float-based styles. In recent versions a flexbox alternative was made available, but given its widespread browser support flexbox is now the master of Bootstrap grids. The CSS technology behind Bootstrap grids doesn’t make a huge difference, but flexbox does offer more flexibility than floats, so flexbox-based grids do come with a few more options. For example, using flexbox means you can define one column and have its siblings automatically resize around it.

2. New: Focused Browser Support

The move towards favouring flexbox actually prompted another change: browser support. Bootstrap v4 has officially dropped support for Internet Explorer 8, 9, and iOS 6. This effectively means your Bootstrap websites will only be supporting IE10+ and iOS 7+. Worth taking note of.

3. New: LESS to Sass

Fans of Sass will be pleased to hear that Bootstrap is now officially a Sass-first project. If you download the Bootstrap source you’ll find a folder called “Sass” in which you’ll see all the necessary partials. “_variables.scss” contains all the variables and settings you’ll need, then “bootstrap.scss” houses all the @import directives, allowing you to customise your Bootstrap installation by including or excluding whichever components you wish.

4. New: REM

In all places apart from media queries, Bootstrap v4 has dropped pixels in favour of relative units of measurement like rems. This makes the whole thing more scalable, so if you haven’t yet grown used to rem units now would be a great time to take a look at these resources:

5. New: Additional Breakpoint Tier

Besides Bootstrap’s move away from float-based layouts, its responsiveness now also comes with an extra tier. From now on, you’ll be able to customise these five defaults:

1	$grid-breakpoints: (
2	xs: 0px,
3	sm: 576px,
4	md: 768px,
5	lg: 992px,
6	xl: 1200px
7	) !default;

6. New: Reboot

The next notable change comes in the form of a new reset file. “Reboot” takes Normalize’s resets, which use only element selectors, then builds upon it with some opinionated class-based reset styles (you’ll find .table and .table-bordered buried in there with several others).

7. Dropped: Custom Builder

If you’ve ever downloaded an earlier version of Bootstrap you’ll be familiar with the online customiser. This tool allowed you to check and uncheck various aspects of the Bootstrap framework in order to create your ideal version.

Well, it’s gone.

Instead, Bootstrap now focuses on its own modular structure, allowing you to leverage Sass from your end, include only what you need, and compile your own deployable end result .

8. Dropped: Glyphicons

Bootstrap no longer includes Glyphicons. Instead, you’re advised to find your own favourites and include them in whichever way you see fit. The Bootstrap team themselves prefer the following sets, which we recommend you implement as SVG rather than using web font icons:

9. Dropped: Grunt

Previous versions of Bootstrap included Grunt support to automate many of the common tasks; that’s now gone. Instead, Bootstrap now comes with a bunch of npm scripts which you’ll find in the “package.json” file. You can use these to do things like watch your Sass files for changes, perform lint tests on your JavaScript, or just use run npm dist to do everything and compile a distribution version of your finished website.

For more details on how Bootstrap and Node.js work take a look at the build tool docs, or check out the following tutorials:

Conclusion

Along with these major changes, there are a number of minor changes to the latest Bootstrap. Fans of components like panels, thumbnails, and wells will be disappointed to learn that these have been removed. However, they’ve made way for an all-encompassing component called the “card”, which is actually a big improvement. You can read all about theses changes, and more, on the Migration page.

Stay tuned for more Bootstrap 4 tutorials and courses on Tuts+, and I’ll see you next time!

Useful Resources

Bootstrap 4 announcement on the Bootstrap blog
getbootstrap.com
Migration docs