3

I’m trying to make a sticky footer using bootstrap 4. How do I make sure regardless of how much content it always stays at the bottom of the screen? I've looked up other answers for sticky footers and haven't been able to get it to work so I wanted to share my code. I've tried changing out the position from fixed, absolute and relative none of which work. On another project I was able to get it to work with absolute. Does it have to do with my css for html and body?

HTML

<footer class="footer">
    <!-- <div class="container-fluid"> -->
    <a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a>
    <a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a>
    <a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
    </a>
    <a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
    </a>
    <p id="copyRight">@Copyright 2018 www.lucasstahl.com</p>
    <!-- </div> -->
</footer>

CSS

body,
html {
width: 100%;
height: 100%; 
/* min-height: 100%;
position: relative; */
background-position: center;
background-image: url("clark.png");
background-size: cover;
}

.footer {
/* clear: both; */
/* position: absolute; */
background-color: rgb(229, 240, 136);
text-align: center;
color: rgb(175, 167, 166);
border-top: 5px solid  rgb(175, 167, 166);
overflow: hidden;
padding-top: 20px;
bottom: 0;
width: 100%;
height: 100px;
}

The problem I have is that it's moving the footer depending on the size of the screen. It won't stay there all the time.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Stahlwalker
  • 51
  • 1
  • 1
  • 4

1 Answers1

2

For different screens you will need to use media queries This will allow you define at each size of your screen how the footer will look.

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ Is what you need by the looks of things

Look at the code I've provided jsfiddle

<footer class="footer">
  <!-- <div class="container-fluid"> -->
  <nav>
    <li><a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a></li>
    <li><a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a></li>

    <li><a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
        </a></li>
    <li><a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
        </a></li>

    <li id="copyRight">@Copyright 2018 www.lucasstahl.com</li>
  </nav>
  <!-- </div> -->
</footer>

CSS

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: yellow;
  }

  nav {
    display: flex;
    list-style: none;
  }
Paul McLoughlin
  • 2,279
  • 2
  • 18
  • 24
  • That's fine, normally you would search the site first, if the question hasn't been asked before, then you would ask and provide some code, if you have any. If your question has been answered, you would accept the answer as provided. – Paul McLoughlin Mar 08 '18 at 23:24
  • Ok i went back and added my code sorry, this was my first post didn't know the 4 indents to add my code. Also, I did look up the sticky footers before but I keep seeing fixed or absolute. When I use absolute it moves it to the middle of the page, if I put fixed it cuts off the content at the bottom. – Stahlwalker Mar 08 '18 at 23:58
  • @Stahlwalker Include the HTML and the associated the CSS or use JS Fiddle. – Paul McLoughlin Mar 08 '18 at 23:59
  • Ok added my HTML – Stahlwalker Mar 09 '18 at 00:09
  • Thanks Paul it had to do with my index.html file unrelated to my footer, but I had to turn position absolute back on once I fixed it. Thanks a lot man. – Stahlwalker Mar 09 '18 at 01:53
  • @Stahlwalker No problem. – Paul McLoughlin Mar 09 '18 at 02:20