Footers are generally made with
.navbar-inverse
.navbar-default
or
.bg-primary
background color. The link and the text are of same color and links have an hover underline effect
on it.
<footer class="footer navbar-default" role="contentinfo">
<div class="container">
<p>
Some footer Content
</p>
</div>
</footer>
<footer class="footer navbar-inverse" role="contentinfo">
<div class="container">
<p>
Some footer Content
</p>
</div>
</footer>
<footer class="footer bg-primary" role="contentinfo">
<div class="container">
<p>
Some footer Content
</p>
</div>
</footer>
Be sure to add a role="contentinfo"
to help with accessibility.
Bootstrap Example of sticky footer is by far
the best method (ignoring flex) for achieveing a Sticky footer. Bootstrap essentials has made class
.has-sticky-footer
to make .footer
class sticky. So, if HTML needs a sticky footer
use class
.has-sticky-footer
on html tag
<!DOCTYPE html>
<html class="has-sticky-footer">
<head>
...
<style>
/* Values of body margin-bottom and footer height should be SAME */
body {
margin-bottom: 60px;
}
.footer {
height: 60px;
}
</style>
</head>
<body>
...
<footer class="footer" role="contentinfo">
Some footer Content
</footer>
</body>
</html>
Experts suggest solutions like flex, calc and viewport height, negative margins and bottom margin. Except flex the rest methods need a fixed height value. As I do not favour flex due to browser specific limitation, I favour bootstrap method and here's how its done.
Three elements play role in sticky footer:
HTML
tag: This element is positioned relatively with minimum height of 100%.FOOTER
tag: This element is positioned absolute to bottom of page.BODY
tag: This element is give a bottom margin i.e. equal to the height of the footer.FOOTER Height = BODY Margin Bottom
There is a lot of confusion in between young developers to achieve a sticky footer. Below are the step to do a sticky footer
Add a class has-sticky-footer
to HTML tag.
<html class="has-sticky-footer" >
Add a class .footer
to your footer.
<footer class="footer" >
Calculate the height of your footer and add style of height: /* Your-footer-height */;
to your footer element
<footer class="footer" style="height: 60px;">
(IMPORTANT) Finally, add style of margin-bottom: /* Your-footer-height */;
to your BODY tag
<body style="margin-bottom: 60px;">