Footer in Bootstrap, that extends with content or sticks to the bottom

Question

Footer in Bootstrap, that extends with content or sticks to the bottom

6.1k Views Asked by Olive At 11 May 2025 at 14:07

I have been looking for a way to add a footer to a Twitter Bootstrap 3 project I am working on.

What I want is for the footer to stick to the bottom of the page when the content is too short to fill out the screen, but get pushed down by content when the content does fill the screen.

All solutions I have found & tried so far, has either not worked, had the footer ALWAYS shown, or had the footer below the page, so it was only visible upon scrolling.

Thanks in advance!

Original Q&A

There are 3 best solutions below

Menelaos Vergis On 18 December 2013 at 12:28

CSS

 /*Sticky footer*/
    form , html, body {height: 100%;}
    body{background-color:inherit;}
    .wrapper{min-height:100%;height:auto!important;height:100%;margin:0 auto -4em}
    .footer,.push{height:4em}

If you are not using ASP.NET then you may remove form{height:100%} from CSS

HTML

<body>

<div class="wrapper">
    ....Content....
    <div class="push"></div>
</div>

<div class="footer">
   <div class="container">
     <hr /> 
     <span>copyright 2014 | menelabs</span>

   </div>
</div>
 </body>

hbamithkumara On 16 August 2019 at 09:33

These days almost all browsers support viewport units. So used it to have sticky footer. It worked for me.

You can check viewport support here.

Adjust min-height for desired footer position when there is no content.

#main {
   min-height: 70vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="header" class="bg-secondary">Header: Sticky footer example</div>

<div id="main" class="bg-light">   
     <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Less content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">No content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">More content</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane container active" id="home">
      <p>Content 1: Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
    </div>
    <div class="tab-pane container fade" id="menu1">
    </div>
    <div class="tab-pane container fade" id="menu2">
      <p>Content 0</p>
      <p>Content 1</p>
      <p>Content 2</p>
      <p>Content 3</p>
      <p>Content 4</p>
      <p>Content 5</p>
      <p>Content 6</p>
    </div>
  </div>   
</div>


<div id="footer" class="bg-secondary">
   Footer
</div>

**Carol Skelly** · Accepted Answer

Update 2019

There is difference between the "fixed" footer and "sticky" footer... you want the sticky footer.

Bootstrap 3

Use the standard "Sticky Footer" example. This method wraps the entire page content and pushes the footer down.

Here is a working demo: http://bootply.com/93620

<!-- Wrap all page content -->
<div id="wrap">
  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
   ...
  </div>
  <div class="container">    
    <!-- page content -->
  </div>
</div>
<div id="footer">
  Footer
</div>

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

Bootstrap 4

Because flexbox is default in Bootstrap 4, the "sticky" footer is easier.

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main>
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

main {
    flex:1;
}

Demo: Bootstrap 4 Sticky Footer

The other scenario is a bottom footer that is always at the bottom and the content doesn't push it below the viewport. Instead the content area scrolls as needed instead of the body. This is the full-height "app" layout..

Demo: Bootstrap 4 Bottom Footer

Footer in Bootstrap, that extends with content or sticks to the bottom

There are 3 best solutions below

Update 2019

Related Questions in TWITTER-BOOTSTRAP-3

Related Questions in BOOTSTRAP-4

Related Questions in STICKY-FOOTER

Trending Questions

Popular # Hahtags

Popular Questions