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.
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.
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.
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!
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.
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.
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="email@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>
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;
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.
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!
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.
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.
Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
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.
Bootstrap 5 utilizes both theme-color("primary") and $primary color defintions. This article details how to override and extend the theme-colors using Sass.
Here are the basics to get started with a fully customizable Wordpress theme based on the Bootstrap framework. It uses Yarn as package manager, Esbuild and SASS for JS and SCSS compilation respectively.
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.