title: Create a Fixed-to-bottom navbar in bootstrap that slides content upwards when toggled
body: <p>I am having two navbars on my website, one in header and other in Footer</p>
  
  <p>Header part working fine, but what i want is that footer should be similar to navbar, but, when i go in mobile view (smaller viewport) there comes a toggle button (default bootstrap feature) but when click on that toggle, it slides downwards, and the content is displayed below the navbar, inspite upwards, so, can anyone help me in this?</p>
  
  <p>I don't know, how to include Bootstrap in Fiddle, so directly posting my footer code. it includes, bootstrap files and Fontawesome files in my directly.</p>
  
  <p>Got <a href="http://bootply.com/104001">Bootply</a> link:
  <a href="http://bootply.com/104001">http://bootply.com/104001</a></p>
  
  <pre><code>&lt;footer&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-bottom"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body"&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;ul class="footer-bar-btns visible-xs"&gt;
                      &lt;li&gt;&lt;a href="#" class="btn" title="History"&gt;&lt;i class="fa fa-2x fa-clock-o blue-text"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="btn" title="Favourites"&gt;&lt;i class="fa fa-2x fa-star yellow-text"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="btn" title="Subscriptions"&gt;&lt;i class="fa fa-2x fa-rss-square orange-text"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse" id="footer-body"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Browse Our Library&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Our Partners&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;User Review&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Terms &amp;amp; Conditions&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  </code></pre>