CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsticky-footer
LollyBee
LollyBee

Reputation: 35

Sticky footer settings in bootstrap not working

I'm having trouble implementing the sticky footer on my webpage using bootstrap. The site can be viewed here: http://lollyborch.github.io/testfolio/testfolio.html

The HTML is here (footer and other elements are in separate containers):

<footer class="footer">
  <div class="container">
    <ul class="soc">
        <li><a class="soc-linkedin" href="https://www.linkedin.com/pub/lilly-borchardt/23/b20/197"></a></li>
        <li><a class="soc-twitter" href="https://twitter.com/lillyborchardt"></a></li>
        <li><a class="soc-tumblr" href="http://lollyandbee.tumblr.com/"></a></li>
        <li><a class="soc-instagram" href="http://instagram.com/lollyborch"></a></li>
        <li><a class="soc-pinterest soc-icon-last" href="http://www.pinterest.com/lollybee/"></a></li>
    </ul>
  </div>
</footer>

and the CSS (taken from http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css):

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #00A79D;
  /*opacity: 0.5;*/
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

I've been fiddling with this for a few days and I just can't get it to work. Thanks for any help you can provide :)

Upvotes: 3

Views: 5999

Answers (1)

ImAtWar
ImAtWar

Reputation: 1143

Using Position relative on your html, also renders the footerclass relative.

If i were you i would just add the relative to the .row classes, and that will render the footer to be positioned absolute. As the absolute is following the relative positioning..

Upvotes: 3

Related Questions