Bootstrap Footer – creating simple and sticky footer in Bootstrap

Bootstrap Footer

The footer in your website using the Bootstrap framework can be created very easily. A simple footer that is not fixed can be created by using the .footer class or to give it a panel like look, use the panel-footer class in the div wrapper element.

Following example shows how to create simple and sticky footers with bootstrap.

Bootstrap simple footer example

The following example shows how to create a footer by using the panel-footer class of Bootstrap. You can see it as you scroll to the bottom part of the website, after clicking the example link below.

Bootstrap footer

Experience this online

Bootstrap sticky footer example

The following example shows how to create a bootstrap sticky footer. The sticky footer remains fixed at the bottom. This is a whole page example with the scrollbar so that footer can be seen, which is fixed.

Bootstrap footer sticky

Experience this online

For sticky or fixed footer style, just look at the <style> attribute on the top with following code:

<style>

.footer {

position: fixed;

height: 60px;

bottom: 0;

width: 100%;

background-color: #f5f5f5;

}

</style>

and use of the footer at the bottom of the page.

Further reading: Twitter Bootstrap | Bootstrap Table | Bootstrap Form