Creating a Bootstrap WordPress Theme (Part 3) – Sticky Footer

In this tutorial, we’ll show you how to use Bootstrap to create a sticky footer that sticks to the bottom of the screen, even when there is very little content on the page.

This is part 3 in the How to Create a Bootstrap WordPress Theme series.

• Part 1 – Loading Bootstrap & Font Awesome CSS & javascript
• Part 2 – Using Bootstrap dropdowns for your WordPress navigation
• Part 3 – Using Bootstrap to create a sticky footer
• Part 4 – Bootstrapped Layout: Pages, posts & sidebar
• Part 5 – Bootstrap search form & search results pages
• Part 6 – Bootstrap comments section

SEE ALSO: The best WordPress Bootstrap Themes for 2016

Some pages on our website might have very little content, and thus have a small height. When this happens, we still want the footer to be affixed to the bottom of the page. Bootstrap has a solution.

The HTML

</div> <!-- #wrap -->
<footer id="footer">
<div>
	<p>&copy; <?php echo date("Y"); echo " "; bloginfo('name'); ?>. Built with <a href="http://wordpress.org/">WordPress</a>, <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>.</p>
</div>
</footer>

Be sure to place the <footer> AFTER the closing </div> for the div#wrap. It should not be placed inside of div#wrap.

The CSS

/* Sticky Footer */
html,
body {
	height: 100%; /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/* Negative indent footer by its height */
	margin: 0 auto -60px;
	/* Pad bottom by footer height */
	padding: 0 0 60px;
}

/* Set the fixed height of the footer */
#footer {
	height: 60px;
	background-color: #f5f5f5;
}

.container .credit {
	margin: 20px 0;
}

#footer > .container {
	padding-left: 15px;
	padding-right: 15px;
}

Next up: Part 4 – Bootstrapped Layout: Pages, posts & sidebar