Bootstrap 4 - Sticky Footer - Dynamic Footer Height

Sticky footer bootstrap 4

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

Sticky footer with variable height in bootstrap

In your case I would recommend to use Flexbox. One big advantage of using Flexbox is that you don't need to set a specific height to the footer anymore.

You can simply achieve what you want just by changing your CSS to the following

html, body {
  height: 100%;
}

body {
  background: #ffffff;
  display: flex;
  flex-flow: column;
}

footer {
  margin-top: auto;
  background-color: #222;
}

Implementing Bootstrap 4 Sticky Footer with nav links AND copyright message

The Bootstrap 4 sticky footer example is simple text with a single line, so having line-height the same as height (60px) works fine.

Your footer has multiple "lines" so setting line-height:60px is going to double the rendered height of the footer. I'd recommend removing the line-height (as it's used for centering in the example) and set the appropriate fixed height for your content (~ 80px). The 80px is approx. according the vertical spacing you want.

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 80px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px; /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}

https://www.codeply.com/go/IUPGbdWmF1 (no line-height)

IMO, in Bootstrap 4, the sticky footer is much easier to implement with flexbox since the CSS is minimal and doesn't require setting fixed heights.

<body class="d-flex flex-column">
   <nav></nav>
   <div class="container flex-grow-1"></div>
   <footer></footer>
</body>

https://www.codeply.com/go/g8PBpRKaPC (flexbox)

Related: Bootstrap 4 - Sticky footer - Dynamic footer height

HTML: add sticky footer responsive using bootstrap

Set bottom: 0; and position: absolute; and remove unnecessary code as below

sticky bootstrap 4 doc(I open and see in F12)

footer {       position: absolute;       bottom: 0;       width: 100%;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><div class="main"></div>
<footer>footer</footer>

Force Bootstrap's variable height footer to the bottom of page or content, whichever is lower

You can use flexbox to achieve sticky footer.

Using flex: 1 0 auto; to section will make it flexible, it will acquire all available free space in flex-container.

flex: <positive-number>

Makes the flex item flexible and sets the flex basis to zero,
resulting in an item that receives the specified proportion of the
free space in the flex container. If all items in the flex container
use this pattern, their sizes will be proportional to the specified
flex factor.Equivalent to flex: 1 0.

html,body {  margin: 0;  padding: 0;}
html {  height: 100%;}
body {  min-height: 100%;  display: flex;  flex-direction: column;  height: 1px; /* Height hack for IE */}
header,footer {  padding: 10px;  color: white;  background-color: #000;}
section {  flex: 1 0 auto; /* This will make section flexible */}

<header>Header</header><section></section><footer>Footer</footer>

Using flexbox sticky footer with bootstrap

You need to give the flexbox item a width of 100%.

In this case, that would be that .content element:

Updated Example

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.content {
    flex: 1;
}
@media only screen and (max-width: 768px) {
    .content {
        width: 100%;
    }
}