Flushing footer to bottom of the page, twitter bootstrap

css twitter-bootstrap footer
Calvin Cheng picture Calvin Cheng · Apr 11, 2012 · Viewed 592.2k times · Source

I am generally familiar with the technique of flushing a footer using css.

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

Answer

sanon picture sanon · Nov 13, 2012

This is now included with Bootstrap 2.2.1.

Bootstrap 3.x

Use the navbar component and add .navbar-fixed-bottom class: 

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

Don't forget to add body { padding-bottom: 70px; } or otherwise the page content may be covered.

Docs: http://getbootstrap.com/components/#navbar-fixed-bottom

Related questions

Bootstrap 3 Flush footer to bottom. not fixed

I am using Bootstrap 3 for a site I am designing. I want to have a footer like this sample. Sample Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it …

Read More
Fixed footer in Bootstrap

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

Read More
Bootstrap div stretch to bottom of page

I have the default bootstrap template setup, and my problem is that there is white space between a div and the footer. The white space is caused by not having enough content to fill up the entire page, so the …

Read More