Bootstrap 5 Beta has arrived: official RTL support, Popper.js v2, and namespaced data attributes

Looks like the Bootstrap team is working hard to push for the stable version of Bootstrap 5 by launching the Beta 1 version just a day ago, after having released Bootstrap 5 Alpha 3 roughly three weeks ago. We already knew they would ship the RTL version in this release, but it comes as a welcoming update for developers building websites for countries where they read from right to left.

According to the official blog post, the core team says that from now on we should only expect fine-tuning features, bug fixes, optimizations, and updates to the documentation until the final stable release will arrive.

So without further ado, let’s see what new awesome features have been added to Bootstrap with the release of the Beta version.

RTL support

This has been one of the most requested features for a long time coming from developers building projects for countries that are based on a Right-to-left writing system. So it is good to know that Bootstrap will now offer native support for this.

Some of the highlights regarding the RTL support are:

• CSS Dist files now include a separate RTL based version (check out the dist files here)
• RTL Documentation to help you get started
• A couple of RTL based template examples
• RTL based official cheatsheet

The RTL support has been built using RTLCSS, which is a project that helps existing LTR stylesheets to be converted into RTL.

Popper.js v2

Popper.js is a library that Bootstrap uses to position tooltips and popovers which now has been updated to version 2, bringing some new features, such as smaller file size, updated positioning calculations, without affecting the current behavior of the tooltips and popovers from Bootstrap.

There are some breaking changes that you should consider when updating to Bootstrap 5 Beta:

• The offset option has now been removed from the tooltip, popovers, and dropdown components. You can still use the feature using the popperConfig parameter
• The fallbackPlacement option has been changed to fallbackPlacements

Namespaced data attributes

Data attributes used by Bootstrap starting with the new beta version will now have an infix called “bs” which enables the JavaScript behaviours from the official plugins. This is an update aimed to prevent situations when similar data attribute targeting was also used but outside the Bootstrap functionality.

Here’s an example of a dropdown button which now uses the data-bs-toggle attribute:

    
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>
    

States have been added to the utilities API

Here at Themesberg we are a big fan of utilities based stylesheets, and the fact that states have now been added to the utilities API in Bootstrap 5 Beta is even better. What this means is that utilities classes now can be created where the styles will be applied only when a certain state, such as hover, focus, active and others will be triggered by user behaviour.

An example of such a class would be .opacity-hover:hover, if the following options are added to the utilities API by extension:

    
$utilities: (
    "opacity": (
        property: opacity,
        class: opacity,
        state: hover,
        values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
        )
    )
);
    

These settings from Sass will generate the following CSS:

    
.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }
    

A few more features have been added, such as the new toast component positioning, enhancements regarding JavaScript, and a couple more improvements regarding the mixins and stylesheets.

Conclusion

This is a big update, there’s no question about that. RTL version, states for the utilities API, namespaced attributes, all welcoming updates that will help us web developers build user interfaces faster and more efficiently. We are eager to wait for the stable release of Bootstrap 5 and until then we will keep covering updates as they come through.

Before you go, I would like to let you know that here at Themesberg we have already built themes that are based on the new Bootstrap 5 framework, effectively removing jQuery as a dependency and using all of the awesome features of the new version of the framework.

I invite you to check out some of our Bootstrap themes and templates. You can also try out some of the free and open-source ones.