Bootstrap Pill Navigation not working on hosting

Question

I am using a Bootstrap Pill Navigation (Bootstrap 4). Code is as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <ul class="nav nav-pills">
        <li class="nav-item"><a id="homeMenu" class="nav-link active" data-toggle="pill" href="#home">HOME</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#about">ABOUT</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact">CONTACT</a></li>
      </ul>
      <div class="tab-content container-fluid">
        <div id="home" class="tab-pane fade show active" style="background-color:yellow">
          <h1>Home</h1>
        </div>

        <div id="about" class="tab-pane fade" style="background-color:red">
           <h1>About</h1>
        </div>

        <div id="contact" class="tab-pane fade" style="background-color:orange">
          <h1>Contact</h1>
        </div>
      </div>
    </div>
  </body>
</html>

This code works perfectly on localhost. But when it goes live, the links do not redirect to the respective id. Instead, the domain just shows as www.xyz.com/#(id) (when respective links are clicked) and stays on the initial view (which is the home tab). I am a newbie, so not really sure where I have gone wrong! Please help!

Maybe verify if the JavaScript files are loaded properly? It seems to me that the Bootstrap script was not. — David Liang, Aug 25 '20 at 23:59

score 1 · Answer 1 · answered Aug 26 '20 at 20:17

Try using a CDN version of jquery and bootstrap, i.e. replace these lines

<link href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>

with

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

WalterV · Answer 2 · 2020-09-01T15:38:07.187

To create an anchor link you must name the target. You can use plain HTML. Without href attribute, which indicates the hyperlink, the anchors are not seen as links, but their formatting is indistinguishable from "normal" text.

W3C explanation

So:

<a href="#home">This is the link</a>
<a name="home">This is the target</a>

In your case:

<!-- Links -->
<ul class="nav nav-pills">
    <li><a href="#home">HOME</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>

<!-- Sections -->
<div id="home">
    <a name="home"><h1>Home</h1></a>
</div>
<div id="about">
    <a name="about"><h1>About</h1></a>
</div>
<div id="contact">
    <a name="contact"><h1>Contact</h1></a>
</div>

score 1 · Answer 3 · answered Sep 01 '20 at 10:19

This is usually caused by Javascript, bootstrap and jquery files not being referenced properly from their respective folders since you are using them locally, make sure they are being targeted properly or use their direct CDN links to reference them.

Possible solutions are:

Add "../" to your script src links

This depends on the level or hierarchy of your folders.

Use the CDN versions of bootsrap files.

Put scripts at the bottom of your page instead of header area.

score 0 · Answer 4 · answered Sep 01 '20 at 15:43

Try Bootstrap CDN from https://www.bootstrapcdn.com/ for {CSS, JS...} without any hesitation.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Sometimes when we are working on the local machine, we just give a static path based on our OS, but when we deploy the website, the local development OS and Deployment OS differs from each other sometimes. So if we use CDN then the problem will solve with ease.

RICHARD ABRAHAM · Answer 5 · 2020-09-01T17:39:46.583

Easiest Solution is using a CDN (Manual approach also)

You can just plug the below snippet, and it should be working for you!

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="./styles.css">
  </head>

  <body>
    <div class="container-fluid py-2">
      <ul class="nav nav-pills">
        <li class="nav-item mr-2"><a id="homeMenu" class="nav-link active bg-primary text-white" data-toggle="pill" href="#home">HOME</a></li>
        <li class="nav-item mr-2"><a class="nav-link bg-danger text-white" data-toggle="pill" href="#about">ABOUT</a></li>
        <li class="nav-item mr-2"><a class="nav-link bg-warning text-white" data-toggle="pill" href="#contact">CONTACT</a></li>
      </ul>
      <div class="tab-content mt-2">
        <div id="home" class="tab-pane fade show active bg-primary my-5 p-5">
          <h1>Home</h1>
        </div>

        <div id="about" class="tab-pane fade bg-danger my-5 p-5">
          <h1>About</h1>
        </div>

        <div id="contact" class="tab-pane fade bg-warning my-5 p-5">
          <h1>Contact</h1>
        </div>
      </div>
    </div>
  </body>

</html>

You may try out this snippet directly from here JSFiddle Link

If you still wish to use relative paths:

Manual Approach (In Windows):

Create a folder called as libraries in the same directory as your index.html with the above code
Download the files using this link. Unzip it
Copy the bootstrap.min.css file from bootstrap-4.5.2-dist\css to the libraries directory
Copy the bootstrap.bundle.min.js from bootstrap-4.1.3-dist\js to the libraries directory
Download jquery files using this link. Copy the contents into a jquery-3.5.1.min.js file in the libraries directory
Update the HTML code as below:


<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./libraries/bootstrap.min.css">
   <script src="./libraries/jquery-3.5.1.min.js"></script>
   <script src="./libraries/bootstrap.bundle.min.js"></script></script>
</head>

PS: I know it is verbose, but just to be absolutely certain!

Bootstrap Pill Navigation not working on hosting

5 Answers5

Easiest Solution is using a CDN (Manual approach also)

If you still wish to use relative paths: