How Can I Make a Footer Stick to the Bottom of the Page in Bootstrap?

Flushing Footer to Bottom of the Page Using Bootstrap

Question:

Having difficulty getting a footer to flush to the bottom of the page using Twitter Bootstrap, especially considering its responsive nature. How can this be achieved effectively?

Answer:

With Bootstrap 2.2.1, this feature is now included.

For Bootstrap 3.x:

Use the navbar component with the ".navbar-fixed-bottom" class:

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

For Bootstrap 4.x:

Incorporate the following code:

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

Additionally, ensure that you incorporate the following styling to prevent the page content from being obscured:

body { padding-bottom: 70px; }

Documentation:

For detailed information, consult the official Bootstrap documentation at http://getbootstrap.com/components/#navbar-fixed-bottom.

The above is the detailed content of How Can I Make a Footer Stick to the Bottom of the Page in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!