As Bootstrap 5 transitions into its official 2nd beta stage, the journey to its final stable release is finally in sight. Within its latest beta release, there have been a few changes worth mentioning, on top of what has already been a major overhaul within its core.
Here, we will take a look at the Beta 2 release, as well as reviewing some of the biggest differences in version 5 so far.
RTL support
One of the notable features being released in Bootstrap 5 is the RTL (Right to left) support for websites being built in languages such as Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi.
Currently the feature is still experimental, which is as expected during alpha and beta release stages, and it is currently only able to be integrated via standalone RTL CSS stylesheet. Simply adding a `lang` attribute with a relevant language code, and a `dir` (direction) attribute with the value of `RTL`, will transform the site completely into a fully compatible right to left reading experience for consumers, opening a market to millions of additional native RTL language speakers.
https://getbootstrap.com/docs/5.0/examples/#rtl
Goodbye JQuery!
Ever since Bootstrap’s initial release in 2011, JQuery has played a pivotal role in Bootstrap’s development and evolution from an internal project to encourage consistency across internal tools, to a globally recognised CSS Framework giant. However Bootstrap 5 marks the end of an era for JQuery.
The question has to be asked. Why now? Why remove JQuery?
It follows in the footsteps of another development resource giant “Github”, who deemed JQuery almost obsolete in today’s front-end development market.
A rather staggering statement considering that the large proportion of market share of sites (77% of the top million websites) are still built using it. However, this is on the decline. Vanilla JavaScript itself has bridged many of the gaps (DOM Selection, promises and fetch) which JQuery provided a simplified approach to use, and with many of the major front end framework giants (React, Angular, Vue) all growing as the first team players within team Javascript, JQuery is beginning to see more bench time. The latest blow to its market share is being dealt by the hands of Bootstrap 5.
So how is Bootstrap 5 going to bridge the hole left by JQuery?
By means of a huge rework to its core. As expected, most of the core fixes within the beta and alpha releases are stabilising the new core JavaScript platform and addressing user reported bugs.
End of support for IE10 & IE11
Continuing with Bootstrap’s evident “out with the old, in with the new” agenda, it’s not entirely surprising to see the end of compatibility for what almost seems like an ancient relic in the browser market. With the latter being released in late 2013, and its market share combined with IE10 contributing to approximately 1.3% of the total browser usage share, it is arguably completely justified to push consumers towards a more futuristic browser experience.
https://www.w3counter.com/trends 1
As almost any web developer can testify, working with IE hasn’t always been the most enjoyable experience, sometimes prolonging development times on projects to cater for its individual CSS requirements. Whether this is a decision purely to push consumers to a native JavaScript module-based browser, or to provide a better optimized mobile experience with the addition of removing JQuery, one thing is for sure: as a developer, it won’t be missed.
Other notable changes
As with any major Bootstrap release we’ve seen before, the sheer number of changes brought in could warrant a thesis as opposed to a quick review. So here are a few shortened worthy notable changes to mention:
Responsive font sizes
In a bid to add an extra layer of compatibility to websites across multiple devices and platforms, Bootstrap have added an additional RFS (responsive font size) engine to address many of the typography issues faced by developers.
Working in conjunction with well-known pre-processor and post-processor tools such as Sass, Less, Stylus or PostCSS, it offers a wide selection of new classes to automate the headache of overwriting core Bootstrap to accommodate viewports, and offers the ability to resize basically every value for any CSS property with units, like margin, padding, border-radius etc.
Card Decks Removal
Card decks had been a popular feature used in Bootstrap 4, enabling the height and width alignment of a group of card containers. However, due to the changes being made to the grid system, making them more responsive than before, this has now become surplus to requirements.
New Icons
Instead of relying on 3rd parties, such as font awesome, to supply Bootstrap with its icon content library, Mark Otto, co-founder of Bootstrap, has taken it upon himself to carefully design 1300 new Bootstrap exclusive icons in a standalone open source library. A full list of these icons, as well as integration instructions, can be found here:
https://icons.getbootstrap.com/
Beta 2 Release changes.
Having reviewed the major topics of discussion for Bootstrap 5 as a whole, what can we expect for the latest beta 2 release?
Well, quite simply, it’s largely focused on JavaScript updates and compatibility fixes, with a few points worth noting:
Dropdowns
Dropdowns have had an overhaul in Bootstrap 5, caused by the removal of JQuery as a dependency and transitioning to support popper.js version 2.
Due to the scale of changes made to the core JavaScript and popper.js (library mainly used for dropdowns, tooltips and popovers) a lot of work was needed in addressing the positional conflicts between Bs5 and Popper.js, which has resulted in a number of new classes being added by Bootstrap’s native JavaScript core on detection of placement of dropdown classes.
Documentation changes
The Colour utility docs have now been separated and segmented to provide a more readable and concise user experience.
There’s also a whole new Sass section, showing relevant snippets of source code that are related to each set of utilities. Here you will find a list of all available colour and theme variables, associated mix-ins and loops where these utilities are generated in the utilities API.
Miscellaneous updates
As well as the notable mentions detailed above, there is an extensive list of small component changes to navbars, forms, buttons, toasts and many more. Amongst these, fixes include user flagged issues and PR’s.
For a full list of release notes, check out the link below:
https://blog.getbootstrap.com/2021/02/10/bootstrap-5-beta-2/
What’s Next
Bootstrap have already confirmed they have mapped out the next steps, as well as announcing the potential release of the v5 stable version and planning the next steps post stable release for Bootstrap 5.
Here is a list of the next releases and updates following Bootstrap 5 Beta 2:
- Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)
- Bootstrap v4.6.1 (bringing in some more bugfixes and alignment with the latest in v5)
- Bootstrap Icons v1.4.0
Beta 3 will continue to focus on JavaScript issues and documentation improvements. Tooltips in particular have been noted to require some additional attention after their fixes to dropdowns and popovers is deemed to be not quite ready.
Post Bootstrap 5 stable launch, their intention is to look to add some of the features built up in the backlog.
For an idea on what you can expect in future releases post launch, explore the v5.1 project to see what’s being planned.
