How to create a sticky Footer | Create a footer that remains at the bottom of the page

I was just trying to refresh my HTML with bootstrap and came across a requirement to create a footer that would stick to the bottom of the viewport / the viewing space of the device.
In a way, I am documenting this for my future use as well as anyone who stumbles upon this site which searching “sticky footer”.

This will need two pages.

  1. HTML page (in which I will create the footer)
  2. Style Sheet which will be imported into the above HTML file

Code in my HTML (i am using bootstrap for this page)page you should be interested in :

<footer class="footer">
	<div class="container-fluid">
		&copy All rights reserved to wilsonswork.us
	</div>
</footer>

Below is the CSS file code that does the magic.

.footer
{
    color:white;
    font-family: 'Bungee', cursive;
    font-size:15px;	
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: red;
}

I hope this might be helpful for someone.

Add a Comment

Your email address will not be published. Required fields are marked *