Overview
Bootstrap is a modern front-end framework who very popular to create responsive web page, professional, and dynamic. Bootstrap has been around for 8 years and is currently used by more than 18 million websites worldwide. On June 16 bootstrap released the 5-alpha version with many updates.
Major Update
Remove jQuery and switch to Vanilla-JS
In version 5 bootstrap made a big change by removing jQuery which has been used for more than 8 years and replacing it with vanilla-js. In his writing, Mark Otto, founder of Bootstrap said:
We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.
Although jQuery is still popular today and there are still many developers who use it, but since modern Javascript frameworks such as Vue.js, React.js etc. have started has dominated the web development community today, jQuery has begun to lose popularity because modern Javascript frameworks have better performance.
In addition, the transfer from jQuery to vanilla-js is done to optimize the file size in bootstrap 5. With this change, I expected that bootstrap 5 has more efficient code and all features in jQuery can function in vanilla-js.
Drop Internet Explorer 10 & 11 Support
It’s a great thing to remove IE support because here’s only 3% of Internet Explorer users around the world. Also, Microsoft announced to change the default browser to Microsoft Edge and they will stop IE support on Windows 10 by 2025.
Enhanced grid system, modularity, customization
Say hello to new grid xxl. This new grid wil cover screen resolution with ≥ 1400px so now in Bootstrap 5 they have 6 grid options available.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | 0–576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
After using px for gutter width for a long time, bootstrap 5 now changed using the brake unit or “root em” which means that the size will be calculated by the default value of the font-size in the root element. For example, most browsers use the default font-size value of 16px, so 1 rem = 16px.
Gutter size can also be customized as needed by adding the class g- *.
Utilities API
Another exciting int Bootstrap 5 is the Utility API, here’s the example:
$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);Custom SVG Icon Library
Remember in bootstrap 3 they have reusable “glyphicons” icons using font format component, and then removed in bootstrap 4 because most designer and developer rely on free font icon like Font Awesome or use their own SVG icon.
But in the end of 2019 Bootstrap launching a brand new reusable SVG icons library that you can use for your project. You can visit this page for the detail.
Conclusion
Bootstrap is one of the most powerful and familiar front-end (HTML, CSS, Javascript) framework. So it’s a great movement to launch bootstrap 5 with a huge changes. I hope it will make the framework more simple, lightweight, faster, and powerful for developer.
Also I hope we can increase the productivity team work with the effectiveness using bootstrap 5.
