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 has reached beta stage. No more new features or breaking changes in future releases of the V5 branch. We’re testing it out here.
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="firstname.lastname@example.org"> <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!
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.
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.
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.
Bootstrap 5 utilizes both theme-color("primary") and $primary color defintions. This article details how to override and extend the theme-colors using Sass.