title: Bootstrap: Collapse nav at 768 px of screen size
body: <p>I'm using bootstrap but sadly the nav items collapse only for smartphones, how can I make it collapse for tablets in portrait mode? (768px)</p>
  
  <p>My nav item:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;a class="navbar-brand" href="#"&gt;&lt;img src="images/logo.png" width="383" height="150" alt="Logo" /&gt;&lt;/a&gt;
              &lt;li class="active"&gt;&lt;a href="#home"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#service"&gt;Le Service&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#portfolio"&gt;Notre r&amp;Eacute;seau&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;Qui sommes nous?&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Login &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;form id="login"&gt;
                      &lt;li&gt;&lt;input class="form_login" type="text" id="email" placeholder="e-mail" /&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;input class="form_login" type="password" id="password" placeholder="mot de passe" /&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;button class="form_login" id="submit" value="submit"&gt;Submit&lt;/button&gt;&lt;/li&gt;
                  &lt;/form&gt;
                  &lt;li&gt;&lt;a href="#" style="color: white;"&gt;Mot de passe oublié?&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" style="color: white;"&gt;Créer un compte&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="icon-facebook"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="twitter-square"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="google-plus"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>