title: Bootstrap Collapse Navbar not working
body: <p>I am trying for the past couple of hours, but a simple thing don't seem to be working. As you know Bootstrap provides for collapsible navbar when on smaller screens. However this functionality doesn't seem to be working for me.</p>
  
  <p>Here is the concerned code:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse"&gt;
          &lt;div class="container"&gt;
  
              &lt;button class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse"&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;button class="navbar-toggle pull-right btn-info" data-toggle="collapse" data-target="#navForm"&gt;
              Sign In/Sign Up
              &lt;/button&gt;
  
              &lt;div class="collapse navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav navHeaderCollapse pull-left"&gt;
                      &lt;li class="active"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about-us.php"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact-us.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="privacy-policy.php"&gt;Privacy policy&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="sitemap.php"&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="blog" target="_blank"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;ul class="nav navbar-nav pull-right" id="navForm"&gt;
                    &lt;li&gt;&lt;a href="/users/sign_up"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                    &lt;li class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" href="#signin" data-toggle="dropdown"&gt;Sign In &lt;strong class="caret"&gt;&lt;/strong&gt;&lt;/a&gt;
                      &lt;div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;" id="signin"&gt;
                          &lt;form action="[YOUR ACTION]" method="post" accept-charset="UTF-8"&gt;
                              &lt;input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" /&gt;
                              &lt;input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" /&gt;
                              &lt;input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" /&gt;
                              &lt;label class="string optional" for="user_remember_me"&gt; Remember me&lt;/label&gt;
                              &lt;input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" /&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The jsfiddle is:
  <a href="http://jsfiddle.net/n94zL/" rel="nofollow">http://jsfiddle.net/n94zL/</a></p>
  
  <p><strong>Update:</strong> I am getting the following error in Firefox Dev Tools
  Error: Bootstrap's JavaScript requires jQuery</p>
  
  <p>What could this mean?</p>