Twitter Bootstrap 3 Sticky Footer

207

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?

This question is tagged with html css twitter-bootstrap twitter-bootstrap-3

~ Asked on 2013-07-31 09:08:58

The Best Answer is


196

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

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

~ Answered on 2014-02-06 13:20:56


153

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 : http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

~ Answered on 2013-12-16 13:08:10


Most Viewed Questions: