WEB: Upgrade Bootstrap from v4.0 to v5.0

[calvh]

Bootstrap has a new stable version v5.0. I think it is a good idea to upgrade the website to use this new version. It no longer uses jQuery (one less dependency) and new features can be utilized by developers to further improve the website.

Please share your thoughts.

related to issue #41438 and pull request #41447

[calvh]

take

[calvh]

I've created a repo and a live site to test Bootstrap 5. Some elements such as the jumbotron were removed completely and would have to be replaced with something else. The font is also slightly different. Another big change I noticed was that all the data attributes were changed from data-toggle to data-bs-toggle.

[datapythonista]

Thanks for researching @calvh. Those seem like minor problems that we can take care of. Feel free to move forward.

[calvh]

After some tinkering I've managed to upgrade the site to Bootstrap v5.0 while keeping it as close as possible to the original and with minimal changes to the code. You can see it live here.

Here is a list of changes:

• rename data-toggle to data-bs-toggle
• rename data-target to data-bs-target
• rename ml-auto to ms-auto
• rename font-weight-bold to fw-bold
• replace jumbotron with other classes as recommended by Bootstrap
• add CSS rules for <a> tags to remove the underline

Regarding the last point, I am not sure what caused the underline to appear again. I am guessing Bootstrap had some built-in styling for <a> tags but they removed it in v5.

Other notable points are that they changed the font in v5 and made the container class to be wider by default. But overall, the site still functions as it should.

[jorisvandenbossche]

@calvh thanks for looking into this!

One small thing I noticed in your live preview compared to the current site is that the page has become a bit wider. Was that on purpose?

[calvh]

Your welcome! No it was not on purpose as it became wider as soon as I replaced v4 with v5.

I think Bootstrap changed the size of their containers (not sure). The reason I think so is that when you open the Bootstrap website it's exactly the same width.

[datapythonista]

Personally I think that is fine. Unless someone is an expert on front-end (I'm not), I think better to use bootstrap defaults. I assume if their new default is to make pages wider, they'll have a good reason for it.

@calvh do you want to move forward and open a PR?

[calvh]

Sure, thanks for your feedback Marc. I'll make a PR soon and maybe we'll get more comments there.