Yay, we’re on the new Bootstrap v5.0.2!

Steven     26.03.2021

Update: Version 5.0.x is out in the meantime (22.06). You can update with a simple ‘npm update’ command. We did not experience any hick-ups during the change from beta1 → beta2 → beta3 → 5.0.x.

Bootstrap V5 beta 1

Bootstrap v5 has reached beta stage. No more new features or breaking changes in future releases of the V5 branch. We’re testing it out here.

Extra xxl grid breakpoint for screen widths ≥ 1400px

This means maximum container width scales up from 1140px up to 1320px in the default configuration. You might want to take this into account when dealing with large screen text layouts. Limit the number of characters on a single line to improve readability.

Also, in case you have full-width images, be prepared for some image resizing. Full width images need an additional 180px in order to scale nicely on the xxl screens.

Of course, you can always override default configuration and stick with the 1140px container width maximum.

Start and end replace left and right to support RTL

This gives you some search & replace work when migrating from V4. All ‘l‘/’r‘ shortcuts are replaced by ‘s‘/’e‘. The same goes for ‘left‘ / ‘right‘ class names, being replaced by ‘start‘ / ‘end‘.

Top and bottom are unchanged.

The RTL feature is still experimental, changes are to be expected. We did not encounter any hick-ups with the RTL update so far.

Bootstrap V5 introduces floating labels on forms

Form controls have significant changes in bootstrap v5, requiring you to re-layout your forms using the new layout classes. They support appealing floating labels. Here is how it looks like by default:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Add color gradients

You can easily add gradients to various elements (buttons, backgrounds, …), and override default color and directions:

$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;

Don’t forget to enable gradients in case you want to use this. They’re off by default

$enable-gradients:            false !default;

Default contrast ratio 4.5

Text color contrast has improved compared to V4, according to the WCAG guidelines. You can override the minimum contrast ratio, decreasing it should be done with care.

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio:   4.5 !default;

This nice feature makes sure that the contrast ratio of your text is always ok. E.g. in case you pick a dark background color, Bootstrap will make the text light. In case you pick a light button color, the button text will be black automatically.

Popper V2 brings slight performance gain

The Popper dependency is updated from V1 to V2. It comes with a slight decrease of file size: 18kB vs 20.7kB for the minified version. But hey, we welcome any improvement on this front!

Bootstrap V5 migration documentation

The Bootstrap V5 migration documentation is complete and worth a good look before starting your actual migration. One thing we struggled with at the start is the change in override method for $theme-colors.

What’s your experience with the V5 beta?

Did you get some experience with the Bootstrap V5 branch already? Let us know in the comments! We’ll be happy to add any additional tips & tricks in this article.

Comment

Related

The right way to serve responsive images (srcset and sizes attribute) with WordPress and Bootstrap 5

The most confusing thing when you inspect responsive images is the fact that the browser takes into account the DPR (Device Pixel Ratio) in order to download the most appropriate image size. Find out here how to serve your visitors responsive images.

Discover how to override theme colors in Bootstrap 5 using Sass

Bootstrap 5 utilizes both theme-color("primary") and $primary color defintions. This article details how to override and extend the theme-colors using Sass.