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 HTML element.

The Bootstrap Grid Has Changed

Looking back at Bootstrap 3, the 4 breakpoints (xs,sm,md and lg)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

 

Bootstrap 4

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.

Bootstrap 4 Grid Demo

It’s the 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, 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 on the medium grid tier.

 

Bootstrap 4

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

Additionally, there are some very handy spacing utility classes that enable better control of horizontal & vertical space using variable margins and padding around elements.