Bootstrap 4: What’s New

A Visual Guide to The Next Bootstrap

Carol Skelly
Jun 6, 2016 · 7 min read

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.

Bootstrap 3 Panel vs. Bootstrap 4 Card
Bootstrap 4 Context Background Colors

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.

Typeface is larger in Bootstrap 4

The Grid Has Changed

Looking back at Bootstrap 3, the 4 grid tiers (‘xs’, ’sm’, ‘md’ and ‘lg’ breakpoints) worked looked like this..

Bootstrap 3 large tier
Bootstrap 3 medium tier
Bootstrap 3 small tier
Bootstrap 3 extra small tier

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.

Desktop and laptops

The XL breakpoint is screen widths > 1200px

Landscape tablets

The LG breakpoint is screen widths > 992px

Portrait tablets & landscape phablets

The MD breakpoint is screen widths > 768px

Phablets & landscape smartphones

The SM breakpoint is screen widths > 544px

Portrait smartphones

The XS breakpoint is screen widths < 544px

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.

Bootstrap 4 Buttons

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.

  • Add vertical white-space after rows & columns
  • Reduce horizontal white-space between elements
  • Stack 2 headings without huge margins under the first


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…


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.


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…


WDstack

Tools, apps & insight on design + development

1.4K

1.4K claps
Carol Skelly

Written by

S/W Engineer. Web developer. @Bootply @Codeply

WDstack

WDstack

Tools, apps & insight on design + development