Just a few hours ago I noticed a notification from Bootstrap’s Twitter account letting me know that Bootstrap 5 alpha version has been officially released. Here’s the official page and documentation for Bootstrap 5.
So what’s different about the new version? Well first of all let me tell you that I absolutely love the new logo and the idea behind it. According to the developers behind the framework this is how they got inspired:
“Inspired by the CSS that created the very beginnings of this project, our logo embodies the feeling of a rule set—style bounded by curly braces. We love it and think you will, too. Expect to see it roll out to v4’s documentation, our blog, and more over time as we continue to refine things and ship new releases.”
Bootstrap team
So let’s get to the point. Bootstrap 5 officially drops jQuery and support for Internet Explorer 10 and 11. This comes as a huge leap forward for a lighter codebase and a better outlook for the future. Although some developers who work in enterprise powered projects will look at this as a disadvantage, there are ways to workaround IE support using polyfills.
There are some other exciting new features such as a utilities API, updated forms, an expanded color palette, custom icons and many more. We’ll get into the details for each section in this article.
Dropping jQuery 🎤
Although we knew this would happen a few months back already, dropping jQuery as a dependency is a huge improvement in terms of making the CSS framework lighter and faster. jQuery has been an invaluable library in the beginnings of front-end development because of the lack of querying in vanilla Javascript.
Because most of jQuery’s features can now be done using vanilla JS, there’s not too much reason to keep it around. We will write a guide in the coming days on how to migrate from Bootstrap 4 to version 5 and replace old jQuery code with updated vanilla JS.
Removing IE 10 and 11 support 🎉
For some developers this may have come as a bigger surprise than removing jQuery as a dependency mostly because there still are many companies and people using these old browsers for enterprise websites.
But don’t worry, there are workarounds using polyfill to make it work, it’s just not supported by default anymore. You can read more about our take on Bootstrap 5 dropping support for IE 10 & 11 in a previous article.
CSS Custom properties
So this is another very welcoming feature. CSS custom properties are native variables for the browser and compared to Sass variables the advantage is that they are, well, native. It will be much easier to update a wide range of CSS properties dynamically.
For instance, dark vs light modes now will no longer need to be changed via another CSS file but through the custom properties. Here’s the default list of root variables for the colors:
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #28a745;
--bs-teal: #20c997;
--bs-cyan: #17a2b8;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #28a745;
--bs-info: #17a2b8;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #343a40;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
Improved documentation
According to the official blog post the developers behind the framework are saying that they have improved the documentation by giving more explanation, removing ambiguities and by extending the page showing how to customize the framework.
Additionally to the improved docs, we can observe a much more extensive and beautiful color palette with a focus on choosing accessible and well contrasted colors.
Utilities API
I think this is probably the most interesting aspect of Bootstrap 5. It reminds me of how Tailwind CSS works as a utility first CSS Framework and by using the utilities API from Bootstrap you have unlimited possibilities to create utility classes for spacing, positioning, sizing and so on.
For instance, you will be able to easily expand the number of m-*, p-* classes and so on without needing to write custom Sass code to expand them. Here’s an example showing us how the $utilities variable can be expanded by adding multiple values:
$utilities: () !default;
$utilities: map-merge(
(
// ...
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
// ...
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
// ...
), $utilities);
Bootstrap 5 icons
A few months ago a new exciting set of custom SVG powered icons was launched by the creators of Bootstrap. I appreciate the original look and feel of the icons and surely it is worth a try if you’ve been using older libraries. We also wrote an article comparing Bootstrap 5 with Font Awesome in terms of design, usability and performance.
Before finishing the article I would like to present you two of our most popular Bootstrap UI kits from Themesberg. Both use the latest stable version of Bootstrap and will soon be also available in Bootstap 5. Check them out!
Pixel Lite Bootstrap UI Kit
Pixel Lite is a free and open source Bootstrap UI Kit featuring over 200 individual components and 6 hand-crafted pages including about, pricing, sign in and sign up pages.
Pixel comes with SASS and Gulp commands just like in this tutorial and with a couple more powerful features such as project minification and optimization based on advanced Gulp commands.
Pixel Pro Bootstrap UI Kit
Pixel Pro is a premium Bootstrap UI Kit featuring over 1000 components and 13 beautiful example pages that you can use to kick-start your next project. It also comes with advanced custom SASS files and Gulp commands with fully responsive templates.
If you want to take web development to the next level you can grab Pixel Pro for just $89 dollars from Themesberg.
In conclusion Bootstrap 5 retains the base set of components it had with no outstanding design updates, but with a huge focus on creating the framework a more lightweight and standalone dependency that you can use as the backbone for your front-end templates.
We at Themesberg will start updating our themes and UI kits to Bootstrap 5 while keeping the stable 4.5 version, at least until the new version will get a stable release as well.
Check out some awesome free and premium Bootstrap Themes, Templates and UI Kits from Themesberg.
Top comments (3)
No matter if you hate it, Bootstrap has been and will be (for a while still) a great reference for UI Kits, CSS frameworks and the like.
Glad to see those long-awaited features. Also the removal of JS dependencies is sweet indeed.
Personally I haven't been using Bootstrap in a while, but it's not rare for me to define classes like
.btnfor the sake of it 😅Completely agree with you! There are so many great front-end dev resources, libraries and frameworks to choose from. Bootstrap is and will always be a great starting point for projects and it's good to see that it took a great leap forward by removing the jQuery dependency and by also dropping IE support.
Excited for the upcoming versions. We will also update our themes and UI kits to also offer the new Bootstrap 5 jQuery-free versions 😎
Great to see Bootstrap adapting to the trends to be sustainable (Bootstrap 4 using Grid, Bootstrap 5 using low-level utility approach)