How can I fix links bootstrap template?

Question

I'm trying to use startbootstrap-bare template. I want to load a different content when a user press About ( about.html ) but save a navigation (menu) bar.

But when I change the href to

<a class="nav-link" href="/about">About</a>

and put about.html in the same folder with index.html it doesn't really work locally at all (like it tries to open file://about.html which is obviously a wrong path). And shall I copy the contents of index.html to about.html or I can only make bootstrap to load its content div instead?

Answer 1

May be your root directory is different. Because of which browser is looking for a file in the wrong directory. To fix this you can choose the dot operator like shown below which tells browser to look for the file "about.html" in current directory.

Solution with dot operator:

<a class="nav-link" href="./about.html">About</a>

Answer 2

you should put extension also in href. (Just think you can have an about.html and an about.php existing in the same folder.) Simply like this, if the files are in the same folder, otherwise you have to add path.

<a class="nav-link" href="about.html">About</a>