title: Bootstrap default navbar is not collapsed in mobile view
body: <p>So I am new to bootstrap and can't seem to find a solution to fix my problem which is when the mobile view the menu is open when I want it to be collapsed by default.</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
     &lt;div class="navbar-header"&gt;
         &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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;/div&gt;
        &lt;div class="navbar-collapse collpase"&gt;
        &lt;ul class="nav navbar-nav navbar-left"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;News &amp; Events&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
            &lt;a href="#" class ="dropdown-toggle" data-toggle="dropdown"&gt;Things to do&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Leisure&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Groups &amp; Activities &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;    
                &lt;/ul&gt;      
  
            &lt;/li&gt;
             &lt;li class="dropdown"&gt;
            &lt;a href="#" class ="dropdown-toggle" data-toggle="dropdown"&gt;Services&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Education &amp; Learning&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Personal Care&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Police&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;/li&gt;    
                &lt;/ul&gt;      
  
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Businesses&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Discussion Forum&lt;/a&gt;&lt;/li&gt;
  
  
  
            &lt;/ul&gt;
  
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/PXGMD.png" rel="nofollow">Example screenshot</a></p>