Telerik blogs
bootstrap_header

In a way or another, pretty much everyone has used Bootstrap at least once. Millions of websites, prototypes, and themes for well-known CMSs (such as WordPress) are based on Bootstrap. The framework is simple to install, easy to use, and incredibly time-saving. It's built on high quality HTML, CSS, and JavaScript that allows you to create good-looking designs with a minimal effort.

Thanks to CSS media queries, it efficiently scales websites and applications with a single code base, ensuring a pleasant users' experience regardless of the device they are using (phones, tablets or laptops). It features components that can be easily implemented: modals, galleries, tooltips, collapsible tab systems, dropdown menus, buttons, and much more.

The goal of this article is to describe and demo what's coming in Bootstrap 4. Being still in an alpha release, Bootstrap 4 is obviously incomplete and not completely stable. In addition, some features might change, so it shouldn't be used in production yet. However, a detailed description of the improvements made until now will help you have a good idea of the new cool things the framework will include and you'll be able to employ in your future works.

Before I start introducing the new features of Bootstrap 4, let's have a quick recap of the latest updates.

A brief recent history of Bootstrap

On the 19th of August 2015, on the occasion of Bootstrap's fourth birthday and after a year of development, the dev team has delivered the first alpha release of Bootstrap 4. The most important change compared to Bootstrap 3 was the definitive dropping of Internet Explorer 8 and the subsequent possibility of using better CSS3 techniques without being forced to rely on CSS hacks or fallbacks.

Since then, four minor releases have followed: Bootstrap 4 alpha 2 on the 8th of December, 2015, Bootstrap 4 alpha 3 on the 27th of July, 2016, and Bootstrap 4 alpha 4 on the 19th of October, 2016. The current stable version (Bootstrap 3.3.7) was officially released on July 25th, 2016.

Thanks to these updates (and to the surprising help of Bootstrap's huge community), hundreds of improvements, bug fixes, and documentation enhancements have been proposed and included.

What's new in Bootstrap 4?

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. If you are curious and want to know something more about the "competition" between Less and Sass and explore the reasons behind the dev team's recent choice of changing the codebase, I suggest you to have a look at the opinion article titled "Why Bootstrap 4 Means Sass Has Won" by Ed Charbeneau.

Now, let's find out what Bootstrap 4 has to offer.

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/350x150" 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>

This results in:

How thumbnails look like in Bootstrap 3

The code created with Bootstrap 4 is the following:

<div class="card">
  <img class="card-img-top" src="https://placehold.it/350x150" 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>

The Bootstrap 4 code will result in:

How cards look like in Bootstrap 4

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>

This is how the buttons look in Bootstrap 3:

How buttons look like in Bootstrap 3

And this is their new look in Bootstrap 4:

How buttons look like in Bootstrap 4

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 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>

This is how they look:

How display headings look like in Bootstrap 4

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:

  1. Extra-small (<544 px)
  2. Small (≥544 px)
  3. Medium (≥768 px)
  4. Large (≥992 px)
  5. 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. This CodePen example shows how you can implement this new feature.

This should give you enough insights about the differences between version 3 and 4 but if you want to know literally everything, I suggest this detailed list. Keep in mind that this list will be reviewed as development progresses.

Conclusion

This article was aimed at doing a quick overview of what's new in Bootstrap 4 and what will change with the official passage from version 3 to version 4. It is not meant to be all-encompassing, and the best advice if you want to know more about Bootstrap 4 is to read the documentation available on the official website carefully and follow the complete Bootstrap 4 Migration Guide for the latest changes.

The release date for Bootstrap 4 is currently unknown but if you want to have a more detailed idea of the other features the working group will focus its attention onto and see how their work-in-progress is going, you can take a look at the GitHub page of the project. Feel free to join the community if you want to help! The dev team has an ambitious development plan and a long list of todos, so I'm sure that your collaboration would be appreciated.

Related resources:


Telerik Blogging Ninja
About the Author

Annarita Tranfici

Annarita has a Master's degree in European languages and foreign literature from the University of Naples. She works as a freelance translator and copywriter. She is passionate about graphics and web design, and has worked on projects and designs for numerous companies. Her specialties are HTML, CSS, Web Design, Adobe Photoshop and User Experience.

Comments

Comments are disabled in preview mode.