× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Twitter Bootstrap 3 Sticky Footer

Leniel Macaferi
Feb 02, 2015
<p>Here's the <a href="http://getbootstrap.com/examples/sticky-footer-navbar/" rel="nofollow">Sticky Footer simplified code</a> as of today because they're always optimizing it and this is GOOD:</p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;!-- Fixed navbar --&gt; &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;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt; &lt;/div&gt; &lt;div class="collapse navbar-collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;About&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;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/.nav-collapse --&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Begin page content --&gt; &lt;div class="container"&gt; &lt;div class="page-header"&gt; &lt;h1&gt;Sticky footer with fixed navbar&lt;/h1&gt; &lt;/div&gt; &lt;p class="lead"&gt;Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with &lt;code&gt;padding-top: 60px;&lt;/code&gt; on the &lt;code&gt;body &gt; .container&lt;/code&gt;.&lt;/p&gt; &lt;p&gt;Back to &lt;a href="../sticky-footer"&gt;the default sticky footer&lt;/a&gt; minus the navbar.&lt;/p&gt; &lt;/div&gt; &lt;footer&gt; &lt;div class="container"&gt; &lt;p class="text-muted"&gt;Place sticky footer content here.&lt;/p&gt; &lt;/div&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>/* Sticky footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/17966140/Twitter%20Bootstrap%203%20Sticky%20Footer/22948396">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus