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

Footer Flushing in Twitter Bootstrap

Flushing a footer to the bottom of a page is a common task in web design. However, achieving this can be challenging when using responsive frameworks like Twitter Bootstrap.

Understanding the Issue

Bootstrap's responsive nature can interfere with traditional footer flushing methods, which often rely on fixed height or bottom margins. As a result, the footer may not always stay at the bottom of the page on different screen sizes.

Resolving the Issue in Bootstrap 2.2.1 and Later

Bootstrap now includes a built-in solution for footer flushing called the navbar component. To use it, simply add the ".navbar-fixed-bottom" class to the navbar:

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

Bootstrap 3.x and 4.x

For Bootstrap 3.x and 4.x, the same approach applies. Use the navbar component with the ".fixed-bottom" class:

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

To ensure that the page content is not covered, remember to add the following CSS rule:

body {
  padding-bottom: 70px;
}

Conclusion

These methods provide an effective way to flush the footer to the bottom of the page in Bootstrap. By utilizing the built-in navbar component, you can create responsive and consistent footer layouts.

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