Switch to Bootstrap 5

[guoyunhe]

Is your feature request related to a problem? Please describe.
We have a Weblate instance at https://l10n.opensuse.org/ and its UI is based on Bootstrap 3.x. However, other openSUSE project websites are using a theme based on Bootstrap 4.x. If we deploy Bootstrap 4.x, there will be incompatible components/styles that may break the UI functionality.

Describe the solution you'd like
I hope Weblate can support Bootstrap 4.x.

Describe alternatives you've considered

Additional context

[nijel]

This has been already discussed in #1935, the biggest problem with Boostrap 4 is lack of RTL support. There were some third party mods which none of these looked complete, but I didn't investigate that for some time.

Even if that is handled, there is non trivial amount of work to migrate the UI between 3.x and 4.x.

[guoyunhe]

Yes, here are a lot of class names changed. You have to check every component carefully. If one day you decide to open a bootstrap4 branch, I can help with the migration.

[nijel]

First we need working RTL support, then we can consider a migration. Making RTL work properly with Bootstrap 3 was painful as well, but we already have that running.

[Bachstelze]

Bootstrap 4.4 is going to be a LTS release and could then support RTL.

[nijel]

There is also twbs/bootstrap#28797 and twbs/bootstrap#24807, but none really seems to be going anywhere close to having RTL supported.

[Ahoba02]

I have created a tool to solve the issue.
Please visit
http://wahamira.net/tools/get-bootstrap-rtl

The tool modifies the content of the original bootstrap
so that all -left will be changed to -right and -right to -left for only attributes which their class names do not contain -left and -right.

For example:
- border-left will be changed to border-right if its class name does not contain -left or -right
- .text-right will not be changed as it is a class name.
- .rounded-left{border-left:1} both class name and attribute will not be affected because class name contain -left

Kindly give me your feedback.

[Ahoba02]

Did you check
http://wahamira.net/tools/get-bootstrap-rtl

[nijel]

Boostrap 5 should have native RTL support (see twbs/bootstrap#30980), then it makes more sense to switch to that (once it is released).

[Bachstelze]

The beta version of Bootstrap 5 is released. While keeping jQuery as extra dependency most of our plugins should still work. Which changes will we have to figure out?

[nijel]

As Bootstrap 4 entirely changed the layout system (see https://getbootstrap.com/docs/4.6/migration/), all pages will have to be reviewed whether they still work correctly. The 5 renamed many of the helper classes, see https://getbootstrap.com/docs/5.0/migration/

[Bachstelze]

The migration looks like a lot of handwriting which we could reduce with some automatation like https://gist.github.com/landsman/526d88db01cf5ec50fad257fe2d44574
Should we start now a new fork or are there conflicts with e.g. #3063 #3558 ?

[nijel]

I don't think these issues should be blockers. In case somebody starts working on these after starting effort to migrate to Bootstrap 5, it should be built on top of that...

[Bachstelze]

Are we using dropdowns with the dropped flip option? https://getbootstrap.com/docs/5.0/migration/#dropdowns
We have many dropped "form-group", "media", "pre-scrollable", "form-inline", "arrow" and "card" styles which should be exchanged one by one.

The curret migration script is https://gist.github.com/Bachstelze/b6e83881f0608816ba444b6394eafa58

[nijel]

Yes, it's used at least on the watching dropdown menu.

[z3r0101]

Are there any plans to migrate to Bootstrap 5? Many issues present in the older version have been addressed in the latest release. Our OICT organization has flagged Bootstrap v3.4.1 as a high-security risk due to its End-of-Life status, which prevents its use in our production environment. I thought it important to inform you, as this might also impact other organizations.

[nijel]

Yes, the plan is that @meel-hd will start working on that after we are done with some cleanups in the client code (like #12172).