Bootstrap family, it is one of the most famous front-end frameworks among web designers, recently landed his eagerly awaited version 4! Let’s check what’s new and what needs to be replaced and what’s been removed, and what you can do with it.

Bootstrap@getbootstrap

We never stopped believing, and hope you didn’t either! Bootstrap 4.0.0 has finally landed! http://blog.getbootstrap.com/2018/01/18/bootstrap-4/ 

Bootstrap 4

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.

Video Thumbnail

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.

The move towards favoring 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.

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 directives@import, allowing you to customize your Bootstrap installation by including or excluding whichever components you wish.

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 t

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:

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).

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 .

Do it yourself
Do it yourself

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:

Iconics thumbs-up
Iconic’s thumbs-up

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