Bootstrap - Sticky footer Demo
Creating the Footer
To create a footer using Bootstrap, add a <footer> element to your HTML document. Apply the footer class to this element, which will give it some default styling, such as padding and a light gray background color.
Example: Adding a footer element
<footer class="footer">
<!-- Footer content goes here -->
</footer>To position the footer at the bottom of the page, you can use Bootstrap's flexbox classes. Wrap your main content and the footer in a container element with the classes d-flex and flex-column. Then, add the mt-auto class to the footer to push it to the bottom of the container.
Example: Positioning the footer at the bottom
<body>
<div class="d-flex flex-column min-vh-100">
<main>
<!-- Main content goes here -->
</main>
<footer class="footer mt-auto">
<!-- Footer content goes here -->
</footer>
</div>
</body>The min-vh-100 class on the container makes sure that it takes up at least the full height of the viewport, allowing the footer to be positioned at the bottom.
Add your desired content to the footer. This can include copyright information, links to important pages, or any other relevant details.
Example: Adding content to the footer
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">© 2023 Your Company Name. All rights reserved.</span>
<ul class="list-inline mb-0 float-end">
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
<li class="list-inline-item"><a href="#">Terms of Use</a></li>
<li class="list-inline-item"><a href="#">Contact Us</a></li>
</ul>
</div>
</footer>The footer includes a copyright notice on the left and a list of links on the right. The py-3 class adds vertical padding to the footer, while bg-light sets a light background color. The container class is used to center the content and provide some horizontal padding.
Making the Footer Sticky
To make the footer stick to the bottom of the page, even when there isn't enough content to fill the entire viewport, you need to apply some specific CSS properties. The key properties are position, bottom, and width.
First, set the position property of the footer to fixed. This takes the footer out of the normal document flow and positions it relative to the viewport.
Next, set the bottom property to 0. This ensures that the footer always sticks to the bottom of the viewport.
Finally, set the width property to 100% to make the footer span the full width of the viewport.
In Bootstrap, you can apply these properties using the fixed-bottom class on the footer element.
Example: Sticky Footer HTML
<footer class="footer fixed-bottom">
<!-- Footer content goes here -->
</footer>To test the sticky footer, add some content to your page. If the content is shorter than the viewport height, the footer should still appear at the bottom of the screen. If the content is taller, the footer will be pushed down, but it will always remain at the bottom of the page.
Example: Testing the Sticky Footer
<body>
<div class="container">
<main>
<h1>Page Title</h1>
<p>Add some content here to test the sticky footer.</p>
</main>
<footer class="footer fixed-bottom py-3 bg-light">
<div class="container">
<span class="text-muted">© 2023 Your Company Name. All rights reserved.</span>
</div>
</footer>
</div>
</body>With the fixed-bottom class applied to the footer, it will always stick to the bottom of the page, regardless of the amount of content on the page.
Customizing the Footer
To customize the footer, you can use Bootstrap's classes or create CSS rules. Here are some common customization options.
Changing the background color, text color, and padding is easy with Bootstrap's classes. To change the background color, use the bg-* classes, such as bg-dark for a dark background or bg-primary for a primary color background. For text color, apply the text-* classes, like text-light for light-colored text or text-muted for subdued text. Adjust the padding using the spacing classes, such as py-* for vertical padding and px-* for horizontal padding.
Example: Changing background color, text color, and padding
<footer class="footer fixed-bottom py-4 bg-dark text-light">
<div class="container">
<span>© 2023 Your Company Name. All rights reserved.</span>
</div>
</footer>To add social media icons or other elements to the footer, you can use Bootstrap's icons or include images. Bootstrap provides a set of SVG icons that can be added to your footer using the <i> tag with the appropriate class.
Example: Adding social media icons
<footer class="footer fixed-bottom py-3 bg-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<span class="text-muted">© 2023 Your Company Name. All rights reserved.</span>
</div>
<div class="col-md-6 text-end">
<a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-4"></i></a>
<a href="#" class="text-decoration-none me-3"><i class="bi bi-twitter fs-4"></i></a>
<a href="#" class="text-decoration-none"><i class="bi bi-instagram fs-4"></i></a>
</div>
</div>
</div>
</footer>To make the footer responsive, use Bootstrap's grid system and responsive classes. By using the row and col-* classes, you can create a layout that adapts to different screen sizes.
Example: Responsive footer layout
<footer class="footer fixed-bottom py-3 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<h5>About Us</h5>
<p class="text-muted">Learn more about our company and mission.</p>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<h5>Contact</h5>
<ul class="list-unstyled">
<li>123 Main St, City, Country</li>
<li>info@example.com</li>
<li>+1 (123) 456-7890</li>
</ul>
</div>
<div class="col-md-4">
<h5>Follow Us</h5>
<div>
<a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-4"></i></a>
<a href="#" class="text-decoration-none me-3"><i class="bi bi-twitter fs-4"></i></a>
<a href="#" class="text-decoration-none"><i class="bi bi-instagram fs-4"></i></a>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col text-center">
<span class="text-muted">© 2023 Your Company Name. All rights reserved.</span>
</div>
</div>
</div>
</footer>