How to Achieve Responsive Footer Alignment in Twitter Bootstrap?

Responsive Footer Alignment with Twitter Bootstrap

In this article, we explore an issue faced by users trying to align their footers to the bottom of the page using CSS techniques in the context of Twitter Bootstrap, a popular responsive framework.

The issue arises because Twitter Bootstrap employs a responsive design, making it challenging to achieve the desired footer alignment using conventional CSS methods. To address this, let's examine potential solutions:

Bootstrap 2.2.1 and Later

With Bootstrap 2.2.1 or later, this functionality is now natively supported.

Bootstrap 3.x

In Bootstrap 3.x, use the navbar component along with the .navbar-fixed-bottom class:

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

Bootstrap 4.x

For Bootstrap 4.x, use the following code:

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

Additional Note

Remember to also add the following CSS to prevent the page content from being covered:

body { padding-bottom: 70px; }

For more detailed documentation, refer to the official Bootstrap website: http://getbootstrap.com/components/#navbar-fixed-bottom

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