nav pills with dropdown in bootstrap3

Question

I would like have a nav-pill with a dropdown showing a few different options. To this end, this is what I have:

    <nav>
      <ul class="nav nav-pills pull-right">
        <li role="presentation" class="active"><a href="{% url 'home' %}">Home</a></li>
        <li role="presentation"><a href="{% url 'faq' %}">FAQ's</a></li>
        <li role="presentation" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
      </ul>
    </nav>

This does not seem to work however. I can see the dropdown but when I click, nothing happens. Wondering if anyone has encountered the same issue.

Thanks.

Answer 1

Your code seems to work fine I have a working fiddle at the following link Fiddle .

<nav>
  <ul class="nav nav-pills pull-right">
    <li role="presentation" class="active"><a href="{% url 'home' %}">Home</a></li>
    <li role="presentation"><a href="{% url 'faq' %}">FAQ's</a></li>
    <li role="presentation" class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
  </ul>
</nav>

Make sure that you have your libraries loaded in the correct order loading jquery.js first then bootstrap.js. If this is not the problem then you more than likely have conflicting javascript. Take out javascript files one by one and see what javascript is conflicting with bootstrap's javascript.

Answer 2

As wrote Drinkin People , you have working code! just load your jquery.js script before bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

jsfiddle-link