Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fixed footer in Bootstrap

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

like image 891
stdcerr Avatar asked Oct 12 '13 04:10

stdcerr


People also ask

How do I add a sticky footer in bootstrap?

Make Footer Sticky To make your footer stick to the bottom of the viewport, add classes d-flex , flex-column , and h-100 to the body tag. Also add class h-100 to <html> tag.

How can I fix the footer at the bottom of bootstrap 5?

Keep the footer at the bottom by using Bootstrap 5Make sure that you are wrapping everything in a <div> or any other block-level element with the following Bootstrap classes: min-vh-100, d-flex,flex-column,justify-content-between .


2 Answers

To get a footer that sticks to the bottom of your viewport, give it a fixed position like this:

footer {     position: fixed;     height: 100px;     bottom: 0;     width: 100%; } 

Bootstrap includes this CSS in the Navbar > Placement section with the class fixed-bottom. Just add this class to your footer element:

<footer class="fixed-bottom"> 

Bootstrap docs: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

like image 174
Josh KG Avatar answered Nov 03 '22 03:11

Josh KG


Add this:

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

https://stackoverflow.com/a/21604189

EDIT: class navbar-fixed-bottom has been changed to fixed-bottom as of Bootstrap v4-alpha.6.

http://v4-alpha.getbootstrap.com/components/navbar/#placement

like image 32
Siddharth Chauhan Avatar answered Nov 03 '22 05:11

Siddharth Chauhan