Bootstrap 4: What’s New
A Visual Guide to The Next Bootstrap
--
Recently, there has been a lot of talk about what’s new in Bootstrap 4, and I was curious to examine the visual appearance & style differences. Here is a visual guide that will show you what’s new in Bootstrap 4 as compared to Bootstrap 3.
Heads up Aug 2017__ Bootstrap 4 Beta is out! See my latest on what’s new and changed for the long-awaited BS4 beta release.
Panels are now Cards
What you notice first in Bootstrap 4 is that .panel and .well have been replaced by .card. This makes a lot of sense as cards are one of the more well known trends in responsive design. The Bootstrap 4 Cards can be singular, grouped together or equal height. In their default form, you’ll see they look almost the same.
But thanks to flexbox it’s now much easier to create groups of same height cards…
The contextual card colors are still there in Bootstrap 4, but they’re now bolder with inverse backgrounds.
Additionally, there are outline cards for when you want the contextual color without the bold background color.
Fonts are Bigger
As you may have noticed with the cards, it’s very apparent that typography is larger in Bootstrap 4. The default font size went from 14px to 16px in the new Bootstrap 4. There are also new large display headings to make text that really stands out. All of the font sizing in Bootstrap 4 is completely based on `rem` units so that all font sizes are relative to the root element.
The Grid Has Changed
Looking back at Bootstrap 3, the 4 grid tiers (‘xs’, ’sm’, ‘md’ and ‘lg’ breakpoints) worked looked like this..
As you can see in Bootstrap 3, the smallest breakpoint has a wide range of devices less than 768px in width. As a result, there’s no simple way to create different grid layouts for typical smartphone screens (~375px). There is also no way to distinguish between portrait and landscape mode on mobile devices.
The Bootstrap 4 Grid
Introducing the new XL grid tier
Looking ahead to Bootstrap 4, the new grid tier provides better support for typical smaller device widths. Now there are 5 tiers (or breakpoints) to support typical portrait and landscape screen widths.
Bootstrap 4 introduces a new grid breakpoint with the col-xl-* classes. This extra tier extends the media query range all the way down to 544 px (or 34 em based on the new sizing). Eventhough the new XL tier would make one think it’s been added to support extra large screens, it’s actually the opposite.
All the 3.x tiers slide up in 4.x, to fit in the new 544 px to 768 px tier at the bottom. While the old 3.x col-xs-* supported screen widths under 768 px, the new 4.x col-xs-* tier supports screen width under 544 px. This new smaller xs tier means improved support portrait smartphones.
Desktop and laptops
Landscape tablets
Portrait tablets & landscape phablets
Phablets & landscape smartphones
Portrait smartphones
In BS 4, the additional tier allows us to target smaller devices less than 544 px, and create layouts specifically for this screen width. Try this example snippet to see how all of the BS 4 grid breakpoints work.
Many Little Things
An obvious difference between 2.x to 3.x was the move from gradient to flat design which was most apparent in nav and button styling. Bootstrap 4 is more subtle in it’s look-and-feel. Take for example the buttons. They’re still flat, and now come in new outline flavor.
Utility Classes
One of my favorite new features in Bootstrap 4 is the addition of responsive floats that enable you to float an element (left, right) based on the grid tier. Lack of this feature was often an obstacle that required custom CSS media queries, and classes in Bootstrap 3. Consider a scenario where we only want to right-align elements (float:right) on specific breakpoints, and otherwise return to the default behavior of float:none. Here float-md-right is used to float right only on the medium grid tier.
Similarly, the text alignment classes can be used for responsive text positioning in Bootstrap 4.
Additionally, there are some handy spacing utility classes that enable better control of horizontal & vertical space using variable margins and padding around elements. At first, you might think these spacing classes are useless bloat. However, do you remember attempting any of the following with Bootstrap 3?
- Shrinking the gutter/padding between columns
- Add vertical white-space after rows & columns
- Reduce horizontal white-space between elements
- Stack 2 headings without huge margins under the first
In Bootstrap 4, the spacing utils make it easy to change horizontal or vertical whitespace. There is also a new .no-gutters class to remove the gutter (spacing between columns) from the gridrow.
http://www.codeply.com/go/kaWaobOUD8/bootstrap-4-spacing-utils
As of this writing, Bootstrap 4 is still in alpha, and the best way to track progress is over at the official Bootstrap blog.
Update July 2016
Bootstrap 4 Alpha 3 Released
The latest alpha 3 release is out, and there are a few new changes to look at. Here’s a summary…
Tags: The new tag component replaces the old label.
Fonts: The new native font stack is now the default.
Update Sept 2016
Bootstrap 4 Alpha 4
Now that Bootstrap 4 alpha 4 is out, the makers of Bootstrap have announced that they are halting development on Bootstrap 3, to make faster progress on Bootstrap 4.
Update Jan 2017
Bootstrap 4 Alpha 6
With this latest release, Bootstrap is now flexbox by default, so there is no longer a $enable_flexbox variable. There has also been some renaming to simplify and intuitize class names. The most significant being the drop of the -xs column suffix, so for example you’d use col-6 instead for col-xs-6. The other breakpoints: sm, md, lg, and xl remain the same.
Flexbox is also now used for the Navbar component (instead of floats), and there have been a few changes to the Navbar classes to make varying breakpoints and content alignment easier. There are also many flexbox utility classes that make various flexbox-based layouts super simple. The Alpha 6 release also means that the Bootstrap 4 Beta will be up next!
Update May 2018
Bootstrap 4 was officially released several months ago, and is currently at version 4.1.1. For the latest on Bootstrap 4.1, check out these new articles…
More on Bootstrap 4
Insider Heads Up! If you’re considering the new version, take a look at the Bootstrap 4 Ultimate Guide — it’s a growing collection of free Bootstrap 4 snippets, examples and how-to stories exclusive to WDstack.
From the creator of Bootply,
and the editor of WDstack
