Twitter Bootstrap 3 Sticky Footer

I have been using the twitter bootstrap framework for quite a while now and they recently updated to version 3!

I'm having trouble getting the sticky footer to stick to the bottom, I have used the starter template supplied by the twitter bootstrap website, but still no luck, any ideas?

just add the class navbar-fixed-bottom to your footer.

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

Referring to the official Boostrap3 sticky footer example, there is no need to add <div id="push"></div>, and the CSS is simpler.

The CSS used in the official example is:

/* 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;
  /* 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;
}

and the essential HTML:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        
      </div>
    </div>

    <div id="footer">
      <div class="container">
       
      </div>
    </div>
</body>

You can find the link for this css in the sticky-footer example's source code.

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

Full URL : https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css

Here is a method that will add a sticky footer that doesn't require any additional CSS or Javascript other than what's already in Bootstrap and won't interfere with your current footer.

Example here: Easy Sticky Footer

Just copy and paste this directly into your code. No fuss no muss.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

In addition to the CSS you just added, remember you need to add the push div before closing the wrap div

The basic structure for the HTML is

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Live view
Edit view

Twitter Bootstrap 3 Sticky Footer

Related

Recent Posts