Asp.Net MVC and CSS : How to keep the footer stay at the bottom without breaking BootStrap features

By default asp.net mvc provides footer but the problem is it does stay at the bottom of the page. There's a solution provided by BootStrap but it is sticky. We want something that is relative to the page.

The solution presented here is compatible in desktop devices as well as mobile devices.

You can download this @ github.com/wcadap



Technology Used:

• Visual Studio 2013
• ASP.NET MVC 5
• BootStrap 3.0/CSS

Scenario

How to do we solve this?

Let us create a simple css file called FooterBottom.css to handle the footer, body-content classes. I don't recommend editing the boostrap.css directly. Let's us overwrite some of the few properties. Save this in the Content folder.

FooterBottom.css


Note of the comments in the css that the padding-bottom of the body-content should be equal to the height of the footer. For the fix-headers menu, add the padding-top to 45px; in the body-content class (optional). 

Apply the CSS to the _Layout.cshtml template.

1. Include the FooterBottom.css at the header of the _Layout.cshtml.
2. Wrap the body with <div id="wrapper">

That's it folks. Thanks!