Just joined and brand new to this game. Completed a course at work over the last few weeks, and I must say, I'm really enjoying it. However, when I tried to create a page using Bootstrap styling and added an accordion and a carousel, both features failed to work when hosted on GitHub. Additionally, when the navbar shrinks, the burger button becomes unresponsive. Everything works perfectly fine locally and on JSFiddle. I've played around with different combinations of CDN placements, but nothing seems to work properly. The page is responsive, and the columns function correctly. I'm not sure what my next steps should be or what I need to share. Should I share my code? Maybe I should simply copy and paste my .html page here? Thanks in advance!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport " content="width=device-width, initial-scale=1">
<title>Bootstrap & JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120f120c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My Style Sheet -->
<link href="styles/bootstrap_page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="padding-left: 15%; padding-right: 15%;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EEF0EB;">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="home.html"><img src="images/NE_logo (1).png" style="height: 70px; width: 70px;"></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="font-size: 30px;">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="html.html">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="html+css.html">HTML&CSS</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">BS&JS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="boot_JS1.html">BS&JS1</a>
</li>
</ul>
</div>
</div>
</nav>
// The rest of the HTML code is omitted for brevity
CSS:
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap');
body {
font: 20px Dongle;
color: #EEF0EB;
background-color: #EEF0EB;
}
.navbar .navbar-brand {
display: inline-block;
padding: 5px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
display: flex;
}
/* The rest of the CSS code is omitted for brevity */
It seems that nothing is working correctly.