What’s New in Bootstrap 4 ?


What’s New in Bootstrap 4

We all know Bootstrap is the best responsive framework as it is mobile friendly. Jumping ahead, an equally awaited version, Bootstrap 4

is here (though in alpha stage)! No heavy coding, just use the Bootstrap CDN and Bootstrap update is part of your website. Bootstrap latest update is packed with great features.

Bootstrap 4 is built on these standards: HTML5, CSS3, JavaScript and Sass. During recent years, front-end developers have shown a preference for Sass instead of Less, widely adopting it in their projects. In all the previously released versions, Bootstrap used Less as its preprocessor.

As of version 3, a Sass port of Bootstrap was created and maintained. Bootstrap 4 now uses it by default and uses Libsass, a C/C++ implementation of a Sass compiler, to compile really fast.

Features: Under the HUD!

1) Bootstrap has become a part of the larger Sass community now.
2) Almost everything is flex based; especially targeting mobile audience now.
3) A completely different component, CARDS, has been introduced. These are merely a replacement of thumbnails, wells, and old panels. 4) These act as content containers.
5) They’ve let bygones be bygones and thus, they’ve cut loose with the age-old browser versions.
6) Pixels have been bartered for rems
7) Normalize.css and all HTML resets have been fused into a new CSS module, Reboot.
8) Gradients, transitions, shadows, grid classes etc have been canopied under the option of Sass variables.
9) A brand new colour palette and new systems fonts have been induced as well.

CARDS

The .panel, thumbnail, and .well classes have been replaced by .card in Bootstrap 4. Modifier classes for cards offer similar functionality to those components. A card is:

A flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Cards can be singular, grouped together or having equal height. To give you a better idea of how cards will replace the components mentioned before, I have set up an example that demonstrates the same visual component created using thumbnail for Bootstrap 3 and card for Bootstrap 4.

The code developed using Bootstrap 3 is shown below:

<div class=”thumbnail”>
<img src=”https://placehold.it/350×150″ alt=””>
<div class=”caption”>
<h3>Bootstrap 4</h3>
<p>The new version of Bootstrap is incredible. You should definitely try it!</p>
<a href=”#” class=”btn btn-primary” role=”button”>Download</a>
</div>
</div>

The code created with Bootstrap 4 is the following:

<div class=”card”>
<img class=”card-img-top” src=”https://placehold.it/350×150″ alt=””>
<div class=”card-block”>
<h3 class=”card-title”>Bootstrap 4</h3>
<p class=”card-text”>The new version of Bootstrap is incredible. You should definitely try it!</p>
<a href=”#” class=”btn btn-primary” role=”button”>Download</a>
</div>
</div>

As you can see, the markup to achieve the result wanted is almost identical. The card component requires the use of a couple of additional classes but this is due to its flexibility. Moreover, as you can see from the screenshots, in Bootstrap 3 the image is centered by default.

NEW BUTTONS STYLE

Buttons have a brand new style. They definitely went “flat” and removed gradients. Moreover, .btn-outline-* classes have been introduced.

You can see how their look has changed over time and spot the differences in the example below. Given the following HTML:

<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-outline-primary”>Primary</button>
<button type=”button” class=”btn btn-secondary btn-lg”>Large button</button>
<a href=”#” class=”btn btn-secondary btn-lg active” role=”button” aria-pressed=”true”>Link</a>
<button type=”button” class=”btn btn-lg btn-primary” disabled>Primary button</button>

 

CHANGES IN TYPOGRAPHY

In Bootstrap 4, 16px is the new default font size (it was 14px previously), which means that the size of the text is bigger and more visible.

Moreover, in this new version everything is intended to be more dynamic thanks to an important enhancement: the font sizing and the grid system are now based on rems. Be aware that, if you prefer, you can still use pixels, ems, or points for typography. However, Bootstrap 4 font sizing is completely based on the rem unit and the reason behind this change is rems make easier for mobile devices to scale up or down.

And talking about fonts, it’s important to remember that Bootstrap 4 drops the Glyphicons icon font. If you need icons, the dev team suggests the following options:

The upstream version of Glyphicons
Octicons
Font Awesome
The use of rems applies to the grid system as well, that now has max-width set in rems.

DISPLAY HEADINGS

The use of rems has been employed also to introduce a new typographic component: display heading. Bootstrap 3 already supported classes like h1, h2, and so on to display elements as if they were headings. Bootstrap 4 increases the possibility for developers by implementing this new component, which should be used when you need a heading to stand out of the page.

Bootstrap 4 supports four different sizes for display heading (class display-*). The following example shows how to use them:

<h1 class=”display-1″>Heading 1</h1>
<h1 class=”display-2″>Heading 2</h1>
<h1 class=”display-3″>Heading 3</h1>
<h1 class=”display-4″>Heading 4</h1>

FLEXBOX

One of the greatest innovations in this version of Bootstrap is the support for Flexbox, which provides simpler and more flexible layout options in CSS. As stated in Bootstrap’s official guide,

More specifically, [Flexbox] provides:

Easy vertical alignment of content within a parent element.
Easy reordering of content across devices and screen resolutions with the help of media queries.
Easy CSS-only equal height columns for your grid-based layouts.
All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

If you want to know more about this topic and activate it within your Bootstrap grid components, I suggest you to read the article “Using Bootstrap 4 Flexbox”.

OTHER CHANGES

New Spacing Utility Classes have been introduced, allowing you to have better control of horizontal and vertical space. You can now add some space in any direction using a utility class (with margins or paddings).

The code is simple:

<div class=”row”>
<div class=”col-sm-6 m-t-md”>
<!– column-small-50%, margin-top-medium –>
</div>
</div>

Everything is extremely intuitive: m stands for margin, p for padding. In regards to directions: t is for top, r for right, l for left, x for left and right, y for top and bottom and a for all. Finally, for sizes: 0 is for zero, auto for auto, md for medium and lg for large. Leave blank for default.

As a side note, it’s worth mentioning that every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements and all the documentation has been recompiled in Markdown.

For some additional resources, check out this article by Nicholas Cerminara and this post on Medium by Carol Skelly.

What’s changed in Bootstrap 4 as compared to Bootstrap 3?

Among the components that were already in action in Bootstrap 3 but have relevant edits in version 4, I want to mention two important changes. Firstly, a new grid breakpoint with the col-xl-* classes has been introduced. The 4 tier grid system Bootstrap 3 was based on has turned into being a 5 tier grid system including a new breakpoint to support all typical portrait and landscape screen widths.

Now the 5 tiers are:

Extra-small (<544 px)
Small (≥544 px)
Medium (≥768 px)
Large (≥992 px)
Extra-large (≥1200 px)

The XL breakpoint is for >1200px screen widths, while the XS breakpoint allows us to target screens smaller than 544px, providing better support for typical smaller device widths.

The col-xs-* tier in version 3 supported screen widths under 768px, while the new tier supports screen widths under 544px. As a consequence, this change improves support for portrait views on mobile devices (smartphones).

Secondly, Bootstrap 3 does not support custom forms, which have been introduced in version 4. These are completely customizable elements that replace the browser defaults. The same applies to inverse tables that have been added in Bootstrap 4 after the introduction of .table-inverse class.

You may also like

LEAVE A COMMENT