I want to put footer at the bottom of the page

Question

I have some pages where content are too less, and footer goes up, I have fixed it, but now footer being inside of my page content for pages which have more content

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />


<footer class="mt-5 footer bg-dark text-white" style="
   margin-top: 100px;   
   position:absolute;
   bottom:0;
   width:100%;
">
  <div class="container">
    <div class="row p-4">
      <div class="col text-center">
        <a href="#" class="twitter"><i class="fab fa-twitter fa-3x mr-4"></i></a>
        <a href="#" class="facebook"><i class="fab fa-facebook fa-3x mr-4 "></i></a>
        <a href="#" class="google"><i class="fab fa-google-plus fa-3x mr-4"></i></a>
      </div>
    </div>
  </div>
</footer>

in the footer style. if it didnt change anything add display:block as well — Evik Ghazarian, May 13 '19 at 16:46
You can give your body container min-height:100vh and then give absolute position to footer — Arjun, May 13 '19 at 16:49
Can you share your whole css and html code in JSfiddle or any other site? — Arjun, May 13 '19 at 16:59

HungryTechy · Answer 1 · 2019-05-13T17:21:23.773

2

Put the footer inside the div and give it the following style

.container{
    position:relative;
    min-height:100vh;
}
footer{
    position:absolute;
    bottom:0;
    width:100%;
}

edited May 13 '19 at 17:21

answered May 13 '19 at 17:10

HungryTechy

29
3

I want to put footer at the bottom of the page

1 Answers1