Bootstrap 4 is a css framework which is the new version of Bootstrap 3. Bootstrap is made on these technologies: HTML5, CSS3, JavaScript and Sass. During recent years, front-end developers have shown a preference for Sass instead of Less, widely implementing it in their projects. In all the earlier 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.
New additions to Bootstrap 4?
Cards:
The classes .panel, thumbnail, and .well have been replaced by .card in Bootstrap 4. Modifier classes for cards offer similar functionality to those components.
Card class is 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.
New buttons style:
In version 4 of bootstrap buttons classes have been modify with a brand new style. They certainly went “flat” and removed gradients. Moreover, .btn-outline-* classes have been introduced.
Below are some of the following buttons classes mentioned. 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), this means that now the size of the text is bigger and more visible then before.
In this new version everything is intended to be more dynamic. 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 precisely, 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”.
