A lot of incredible new milestones are live now in bootstrap 5. Bootstrap is one of the most popular mobile-first responsive theme templates which powers millions of websites across the globe. This is probably one of the biggest releases which are anxiously anticipated and will bring about major changes in this widely used framework.
As web designers and WordPress theme designers look forward to bootstrap 5, here are the five key changes that are expected … based on information flowing across the internet, and this may or may not happen in the final release.
1. Bootstrap 5 without jquery
jQuery has been a part of bootstrap for a very long time and powers some of the main interactive features of bootstrap like the collapsible navbar, modals, fixed content, etc, and other interactivity which Bootstrap lovers like.
As you notice we also use a free bootstrap theme, and bootstrap has been powering our theme design for many years now and offers the convenience of amazing design and great flexibility to custom edit changes.
If you see our site code and check site speed, you will notice we prefer to not load jQuery anywhere on our blog and also don’t use the bootstrap javaScript to load bootstrap faster. We have increased our site speed by removing this additional functionality in favor of a clean lean site design. Hey! we already run this Bootstrap without jQuery!
This will also allow them to use plain vanilla javaScript and write more efficient code which might be smaller in size and decrease load times. Doing more with less is good.
2. Jekyll to Hugo
Jekyll is a popular static site generator and it is being replaced by Hugo which claims to be the world’s fastest static site generator written in Go. Hugo does not dynamically build a page with each visitor request, but only when you create or update your page.
Considering that the Google algorithm now considers site speed in search engine rankings as an important factor, it becomes imperative to choose whatever mechanism makes any site faster.
3. Responsive fonts/gutters in Bootstrap 5
Do your font size looks similar on a desktop as well as a mobile screen? This is a peculiar but common problem because a font that might appear reasonably normal on a desktop screen will appear gigantic on mobile screens and can take a lot of screen area. You can test your site using the Bootstrap Responsive Test.
This is particularly true for headlines (H1, H2) or another jumbotron/hero areas which are typically in large sizes where the Headline or Post title might fill up the whole mobile screen (while might appear much smaller on a larger retina display/4K screen).
It would be a great idea to change font size based on the specific viewport using tools like the RFS repository which can not only resize fonts but also any other CSS properties dependent on the browser viewport size.
Similarly Bootstrap has been providing an excellent responsive framework and a shift to .rem everywhere will make it more compatible and responsive with modern web browsers and modern site design. While px has been used for a long time by web designers, .rem ensures content resizes efficiently based on the DPI and resolution of the browser screen.
Of course, you can use premium paid themes and many of them will have this functionality built-in without Bootstrap.
4. Integrated Icon Library in Bootstrap 5
I remember the earlier versions had integrated Glyphicons (which were otherwise paid icons), cool icons which were part of Bootstrap and you need not go looking for icon fonts like Font Awesome to get fast-loading icons. Our Font Awesome WordPress theme makes bootstrap even more beautiful without much additional code.
But now as they continue to develop Bootstrap Icons, and integrate their own icon library as part of Bootstrap 5, that would be interesting and you no longer need an icon font. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.
Though I notice most bloggers go looking for social icons, but they are not present in the Bootstrap icons set, possibly because they are brand icons and need other permissions. But they are in an alpha phase now and it’s a long way to go.
5. No support for Internet Explorer 10/11
While most users continue to use Google Chrome, Mozilla Firefox, or Microsoft Edge Browser, Internet Explorer has continued to become outdated and it does not support many modern web functionalities which are supported by these modern Browsers.
Maintaining backward compatibility support has been an important part of Bootstrap as I remember putting all those comments in the HEAD for backward CSS support of older browser versions. That possibly involved a lot of additional display code and dependencies, and much more unnecessary testing which now will no longer be required.
So here are the key changes in Bootstrap 5 and it would be interesting to see how we can incorporate this new functionality in our website design.