Using twitter bootstrap with bottom sticky footer

Nowadays, more website comprises 3 components. header, body and footer. With bootstrap, you can get it done even quicker. Here I created a sample start up project with most common layout in the world: Top fixed header, body and bottom sticked footer.

Here are some codes of the _layout.cshtml (if you are using MVC) or masterpages (asp.net) or any other languages whatever you call it.

For header section, use the bootstrap default “navbar” classes, you can set it to “navbar-fixed-top” or not, it is your choice. Set to top fixed, the header bar is always visible when you scrolling down.

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a href="/" class="brand">Brand name</a>
                <ul class="nav">
                    <li><a href="">Home</a></li>
                    <li class="divider-vertical"></li>  
                    <li><a href="">Products</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="">FAQ</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><a href="">Register</a></li>
                    <li><a href="">Login</a></li>
                </ul>
            </div>
        </div>
    </div>

For body section, I created a “wrap” div outside the “main” div, this is to make sure the footer stays after it. You will know what I mean after I show you the CSS

    <div id="wrap">
    <div id="main" class="container clear-top">
        <div class="row"> 
            <div class="span12">
                @RenderBody()        
            </div>
        </div>
    </div>
    </div>

For footer section, using <footer> is completely ok with modernizer, and I created a 3 columns with same size for your footer navigation links.

    <footer class="footer" style="background-color:#c2c2c2;">
        <div class="container" style="margin:0 auto;">
            <div class="row">
                <div class="span2 offset2">
                    <h4>Company</h4>
                    <ul>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
                <div class="span2 offset1">
                    <h4>Resource</h4>
                    <ul>
                        <li><a href="">Get help</a></li>
                        <li><a href="">FAQ</a></li>
                        <li><a href="">Support</a></li>
                    </ul>
                </div>
                <div class="span2 offset1">
                    <h4>Connect</h4>
                    <ul>
                        <li><a href="" title="Facebook">Facebook</a></li>
                        <li><a href="" title="Twitter">Twitter</a></li>
                        <li><a href="" title="LinkedIn">LinkedIn</a></li>
                        <li><a href="" title="Google+">Google+</a></li>
                        <li><a href="" title="RSS">RSS</a></li>
                        <li><a href="" title="Blogs">Blogs</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

Now let’s see the CSS,

/* styles for layout */
html,body
{
    height:100%;
}

#wrap
{
  min-height: 100%;  
}

#main
{
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer 
{
    position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;
    padding-top:20px;
    color:#fff;
} 

Your footer is sticked to the bottom always.

To download the project sample, go to codeplex

http://bootstrapfooter.codeplex.com/

Advertisements

9 thoughts on “Using twitter bootstrap with bottom sticky footer

  1. Worked when the content was longer than the browser window.

    Didn’t work for me when the content was less the the browser window height. It stuck to the bottom of the content then the rest of the page below the footer was blank.

    • I don’t think modify botstrap css is a good idea. As when you update boostrap, you may lose your customized styles. I normally have a site.css for whatever styles I have or overriden boostrap styles, I put in that file. And reference it in the master page.

  2. This seems to work… but wonder if there is even a better way 🙂

    /* custom styles for footer layout – place in separate style CSS document – HTML CSS link should be below the bootstrap-responsive.css */

    html,body
    {
    height:100%;
    }

    body { /* override body style in bootstrap-responsive.css to get full width navbar AND footer*/
    padding-right: 0px;
    padding-left: 0px;
    }

    #wrap
    {
    min-height: 100%;
    padding-right: 0px;
    padding-left: 0px;
    }

    #main
    {
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
    }

    .footer
    {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    min-height: 150px;
    clear:both;
    padding-top:20px;
    color:#fff;
    }

    @media (max-width: 480px) {

    .navbar, .footer { /* compensate for overiding body in bootstrap-responsive.css */
    padding-right: 20px;
    padding-left: 20px;
    }

    #wrap
    { /* compensate for overiding body in bootstrap-responsive.css */
    padding-right: 20px;
    padding-left: 20px;
    }

    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s