I tried using the answer from , but unfortunately, it didn't work for BS4. Even after attempting André Rocha's solution at the end, my issue remains:
My goal is to load Bootstrap 4 via CDN, with a fallback to a local CSS file if needed.
The problem I'm facing is that the bootstrap 4 css file is being loaded twice, when I only want it to be loaded once.
Below is the code (similar to the one in the aforementioned answer). The fallback function for the CSS file is placed 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>