How to fix layout changes from bootstrap upgrade from 3 to 5

Security made me upgrade jQuery from 3.2.1 to 3.6.0 and bootstrap from 3.3.7 to 5.0.1 using NuGet, and to get rid of old hand-installed jQuery/bootstrap files, and now I am having some layout problems that I cannot fix.

Symptom 1

Here I got a visible button "Toggle navigation". Before, this button was invisible. The info I found on css class sr-only said that it should make invisible on a screen reader (reading screen content to a blind computer user), but I don't have a screen reader but a firefox/chrome browser. I would guess this class should show for Screen Reader Only. In any case, this button does nothing so I commented it out.

<nav>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar" 
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button -->
                <a href="/" class="pull-left">
                    <img src="/Images/company_logo.png" />
                </a>
                <span id="span_pagetitle" class="pull-left span_pagetitle" runat="server">
                   Page Title
                </span>
            </div>

Strange still that the Chrome dev tools, under Elements, Styles, show that sr-only was handled by bootstrap.min.css, but with the new Bootstrap5 by _reboot.scss . The underscore suggests that this is a temp file, and the extension that it has to do with the higher level CSS system SCSS or SASS

In the DevTools, under Network, I still see that bootstrap.min.css was downloaded from the Content folder.

Symptom 2

In the above header code, the logo image and page title showed nicely on the same height in a light grey header bar. But after the upgrade, the layout is gone, ruined. Image and text have lowered, but with different amounts, and there is no light grey header bar as background for the image and text.

Do I need to learn SASS to fix this problem?

Or did something possibly go wrong with installing bootstrap?

To be honest, I had to manually copy the jQuery files from packages to Scripts. I am now also wondering about jquery-ui.min.js/css and jquery-latest.min.js from a not upgraded version from package mutty-keyboard, as shown by the Network tab of DevTools. Could that cause interference with bootstrap???

Thanks for any hint that may possibly nudge me in the right direction.

Update:

While the answer on this question is actually very useful, I also found out that there is no such thing as an upgrade from Bootstrap 3 to 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade. Use Bootstrap 5 on your new project.

The security scan that suggested this upgrade is doing too many upgrade suggestions, perhaps to get you scared and take your wallet out :-)