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.
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.
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.
.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:
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:
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.
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:
And this is their new look in Bootstrap 4:
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
The use of
rems has been employed also to introduce a new typographic component: display heading. Bootstrap 3 already supported classes like
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:
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".
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.
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:
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.
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.
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.