How to Flush a Footer to the Bottom of the Page in Twitter Bootstrap?

Flushing Footer to Page Bottom with Twitter Bootstrap

Flushing a footer to the bottom of a page using CSS is a common technique. However, difficulties arise when attempting to apply this approach with Twitter Bootstrap due to its responsive nature.

In earlier versions of Bootstrap, flushing the footer to the bottom was not included. However, in Bootstrap 2.2.1 and later, this feature is available.

Bootstrap 3.x

To flush the footer in Bootstrap 3.x, use the navbar component and add the .navbar-fixed-bottom class. This will fix the footer to the bottom of the page, regardless of the page height.

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

Bootstrap 4.x

In Bootstrap 4.x, the syntax has changed slightly. To fix the footer to the bottom, use the following code:

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

To prevent the page content from being covered, add body { padding-bottom: 70px; } or a similar style rule.

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