Search code examples
htmlcssbootstrap-4footer

How can I fix this footer?

So I'm doing a footer with bootstrap, it looks great but when I put in this resolution (image below), a blank space showed it up.

Boostrap Footer:

enter image description here

This is what I made:

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
  </div>
</footer>

footer{
 background: #333;
 color: #eee;
 font-size: 11px;
 padding: 20px;
}

How can I fix that?

With nikhil's approach this is happening

attemp

Solution

  • I am not sure if that's what you want but you can just add style="min-height:100vh" to your page content container and place footer in another container.

    This way your footer will always be at the bottom of your page.