I am playing with a very simple web page to learn to integrate HTML, CSS, JS and Bootstrap.
I have the code below (which works if copied to every sheet) but it seems stupid to duplicate the block on every page.
Is there a simple way to create a navbar.html with the common code (like I would do with CSS) and reference it within the index/page1/page2 etc. sheets?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.html">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.html">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page4.html">Page 4</a>
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
hello, homepage
</body>
</html>
I have tried a couple of explanations online and, I don’t know if there is a Bootstrap version issue, but I just can’t seem to get the Navbar to pop up. It seems fairly simple in principle that I cut the to from index and paste it into its own file and then use a code block (I tried a couple) to ‘call’ the navbar (all of my files are in the same folder).
There may be better answers out there but maybe my current knowledge isn’t allowing me to get the right search.
For now I am looking for the simplest approach … as this is just part of the learning project I don’t want to get too bogged down in code I cant decipher.
Any pointers or direction to a better resource would be appreciated!