title: Navbar collapse not expanding with dropdown after clicking on it
body: <p>So, I have just started using Bootstrap 3, and I want my header to be fixed at the top, content in it vertically aligned with the content in body, and lastly, responsive.</p>
  
  <p>Everything works fine except that clicking on collapsed navbar doesn't seem to work. Clicking on those small icon with three bars one over other doesn't show me my list below. </p>
  
  <p>I know this could be a very basic mistake but clicking on this kid right here, doesn't work:</p>
  
  <p><img src="https://i.stack.imgur.com/5wZwt.png" alt="collapsed navbar"></p>
  
  <p>I think I might be doing something wrong with classes in my header.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;header class="navbar  navbar-default navbar-fixed-top" role="banner"&gt;
  &lt;div class="col-10"&gt;
  &lt;div class="container"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Logo Text&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;nav class="collapse navbar-collapse" role="navigation"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="home_button"&gt; &lt;a href="#"&gt; &lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt; &lt;a href="#" &gt; My Account &lt;/a&gt; &lt;/li&gt;&lt;br&gt;
            &lt;li&gt; &lt;a href="#"&gt; Logout &lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The only thing I have in my custom css is:</p>
  
  <pre><code>@media (min-width: 980px){
      body{
          padding-top: 70px;
      }
  }
  </code></pre>
  
  <p>but I don't think that would be causing this problem.</p>
  
  <p>The things I have included before my header in my html are:</p>
  
  <pre><code>&lt;script src="/static/js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="/static/js/jquery-migrate-1.2.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"&gt;&lt;/script&gt;
  &lt;link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen"&gt;
  &lt;link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen"&gt;
  </code></pre>
  
  <p>which are all in my local directory.</p>
  
  <p>Searching for "collapse not working"/"collapse click not working" shows me bunch of results which seem to be related to the problem of this icon itself not showing up.</p>
  
  <p>Including collapse.js that came with bootstrap didn't fix this problem either.</p>