Bootstrap 3 nav-pills not working

11,357

What is your expected result ? Can you try to insert some <li> tags to see whether it works properly ?

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

FYI: http://getbootstrap.com/components/#nav-pills

Please also attach the assets/css/style.css file specified above. It is suggested to place the Bootstrap CDN at the top of <head>, above your custom css file.

=========== Updates ===========

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 </head>
 <body>
  <div class="container">
    <div class="row">
      <nav class="nav navbar-nav">
         <ul class="nav nav-pills">
            <li role="presentation"><a href="#">Blah</a></li>
            <li role="presentation"><a href="#">Blah</a></li>
            <li role="presentation"><a href="#">Blah</a></li>
        </ul>
      </nav>
    </div>
  </div>
 </body>
</html>

Result:

enter image description here

Is that your expected pill effect ?

11,357

Author by

Jess McKenzie

Feel bad about having so many posts on here but the only way you get to learn is by taking it in and asking questions.

Updated on June 04, 2022

Comments

Jess McKenzie almost 2 years

I have followed the documentation but I am unsure why my pills are not working.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="assets/js/script.js"></script>
    <link rel="stylesheet" media="all" href="assets/css/style.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
    <nav class="nav navbar-nav">
         <ul class="nav nav-pills">
            <li>blah</li> 
        </ul>
    </nav>

    </div>
</div>

</body>
</html>

Jess McKenzie over 9 years

I have attached my whole HTML document and you can see I using the CDN that does have the nav-pills CSS in it. I do have <li> in my code. I am just not getting the "pill" effect as I should be
Jess McKenzie over 9 years

I am getting no effect at all
tony.0919 over 9 years

I've updated my comment. Please let me know if you still have problem ? In fact, if you use //ajax/googleapis... instead of http://ajax/googleapis..., and open index.html directly, you will get Uncaught ReferenceError: jQuery is not defined error message.