New in Bootstrap 4

A Visual Comparison of Bootstrap 3 and 4

Recently, there has been a lot of talk about what's new in Bootstrap 4, but 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 with Bootstrap 3.

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 they're default form you'll see they look almost the same.

The contextuals colors are still there in Bootstrap 4, but they're now bolder with inverse backgrounds..

Bigger Fonts

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 "Display headings" that really stand 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 HTML element.

Lookback: Bootstrap 3 Grid

In Bootstrap 3, the 4 breakpoints worked looked like this..

Bootstrap 3 LG

Bootstrap 3 MD

Bootstrap 3 SM

Bootstrap 3 XS

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.

New Bootstrap 4 Grid with XL 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 544px to 768px 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.

size 3.x 4.x
1200 - ∞ lg xl
992 - 1199 md lg
768 - 991 sm md
544 - 767 xs (<= 768px) sm
0 - 542 - xs

Desktop and laptops

The XL breakpoint is screen widths > 1200px

Bootstrap 4 XL - typical large screens

Landscape tablets

The LG breakpoint is screen widths > 992px

Bootstrap 4 LG - typical tablet screens

Portrait tablets and landscape phablets

The MD breakpoint is screen widths > 788px

Bootstrap 4 MD - typical smaller tablet

Phablets and landscape smartphones

The SM breakpoint is screen widths > 544px

Bootstrap 4 SM - typical small tablet and landscape phone size

Portrait smartphones

The XS breakpoint is screen widths < 544px

Bootstrap 4 XS - typical smartphone size

Bootstrap 4 Grid Example

Outline Buttons

The obvious difference between 2.x to 3.x was the move from gradient to flat design which was most apparent in nav and button stlying. Bootstrap 4 buttons are still flat, with the addition of new outline buttons.

Outline buttons

Responsive Alignment

One of my favorite new features in Bootstrap 4 is the addition of Responsive Floats that enable you to float an element (left, right, etc..) based on the grid tier. Lack of feature this 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 pull-md-right is used to float right only the medium grid tier.

Responsive pull-right

Similarly, the Text Alignment classes can be used for responsive text positioning in Bootstrap 4.

Bootstrap 4 is currently is alpha, but if you're ready to take on the new version you can learn more using these helpful resources:

New themes, snippets & examples
Convert html from Bootstrap 3 to Bootstrap 4
Bootstrap 4 grid tier test
Bootstrap 4 examples & snippets