fallback to local bootstrap 4 css file

This answer: https://stackoverflow.com/a/26198380/4370354 unfortunately doesn't seem to be working for BS4, even after trying André Rocha's answer at the end, so here is my problem:

I am trying to load bootstrap 4 via CDN, but have a fallback to a local CSS file in place, just in case.

The below code results in the bootstrap 4 css file being loaded twice, but I would like it to be loaded only once.

here is what I have (pretty much the same as in the answer above) The fallback function for the CSS file is at the very end:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap 4.1.1 CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Home | phpMIDAS viewer</title>
  </head>
  <body>
    <!-- jQuery 3.3.1 CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- Bootstrap 4.1.1 JS CDN -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
    <!-- Bootstrap 4.1.1 JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
    <!-- Bootstrap 4.1.1 CSS local fallback -->
    <div id="bootstrapCssTest" class="hidden"></div>
    <script>
      $(function() {
        if ($('#bootstrapCssTest').is(":visible")) {
          $("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
        }
      });
    </script>
  </body>
</html>

Solution

After experimenting further, I figured out that all I needed to do was to replace class="hidden" with class="collapse".

Here the corrected code, in case someone wants to see/use it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap 4.1.1 CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Home | phpMIDAS viewer</title>
  </head>
  <body>
    <!-- jQuery 3.3.1 CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- Bootstrap 4.1.1 JS CDN -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
    <!-- Bootstrap 4.1.1 JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
    <!-- Bootstrap 4.1.1 CSS local fallback -->
    <div id="bootstrapCssTest" class="collapse"></div>
    <script>
      $(function() {
        if ($('#bootstrapCssTest').is(":visible")) {
          $("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
        }
      });
    </script>
  </body>
</html>