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

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 5 Beta 2

Our second beta has arrived for Bootstrap 5! We delayed its release to iron out some issues with third-party libraries and stabilize our major changes. We’ve also once again shipped some awesome updates to our documentation.

https://blog.getbootstrap.com/2021/02/10/bootstrap-5-beta-2/

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.

Bootstrap 5 Beta 3

Our final beta for Bootstrap 5 has come with some amazing new changes (including a new component!), documentation updates, and more. We’ve also fixed some important bugs since our last release, in particular with our dependencies. Next up is our stable release!

https://blog.getbootstrap.com/2021/03/23/bootstrap-5-beta-3/

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!

Popper.js V2

Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications.

https://popper.js.org/

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.

Migrating to v5

Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.

https://getbootstrap.com/docs/5.0/migration/

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.