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
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:
- CSS7 CSS Units You Might Not Know AboutJonathan Cutrell
- Responsive Web DesignComprehensive Guide: When to Use Em vs. RemKezz Bracey
- CSSWhy You Should Be Using Rem-Based LayoutsKezz Bracey
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:
$grid-breakpoints: ( xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !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-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
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:
- TerminalThe Command Line for Web Design: Grasping the BasicsKezz Bracey
- TerminalHow to Install NPM and BowerKezz Bracey
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!