Make Footer Stick to Bottom of Page Using Twitter Bootstrap

Flushing footer to bottom of the page, twitter bootstrap

Found the snippets here works really well for bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Make footer stick to bottom of page using Twitter Bootstrap

As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807

One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:

html,body{
    height: 100%
}

You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.

How to make the footer stick to the bottom of the page and centered in Bootstrap?

The simple way is to use flexbox on the BODY or some wrapper element. Then use mt-auto to push the footer to the bottom of the page.

<body class="d-flex flex-column min-vh-100">
  <div class="container">Other page content..</div>
  <div class="footer mt-auto text-center">
    <span id="bottom"> 
        <hr>
        <p>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
       </p>
    </span>
  </div>
</body>

https://codeply.com/p/prWsoALtSD

Also see: Bootstrap 4 Sticky Footer Not Sticking

How to stick footer to bottom of the page, without using fixed

First thing, for footer, you need to use <footer class="footer"></footer> if you're using bootstrap.

You can also have a separate component for footer if you're using react.

In html, css

Bootstrap footer at the bottom of the page

https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap#:~:text=The%20simplest%20technique%20is%20probably,the%20footer%20to%20the%20bottom.&text=Tested%20with%20Bootstrap%203.6.

The above links should be helpful

Clean way to make footer stick to the bottom of the page?

You can achieve a sticky footer using flexbox.
Whereas your main grows using flex-grow:1 if the content is smaller than the height of the screen.

Whereas these are to important parts of the code snippet:

html,body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

header, footer {

  height: 50px;

}

header {

  background-color: green;

}

.content {

  background-color: grey;

  overflow: hidden;

}

footer {

  background-color: red;

}

html,body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

main {

  flex-grow: 1;

}

<header>header</header>

<main>

  <div class="content">

    content

  </div>

</main>

<footer>footer</footer>

Bootstrap 4 - Push footer to the bottom of page and fill height with main content

use 100vh here and if you don't want full viewpoint, you can cut navigation bar height from it so no scrollbar appers.

html {

  position: relative;

  min-height: 100%;

}

body {

  /* Margin bottom by footer height */

  margin-bottom: 60px;

}

.container {

 max-width:100%;

}

.footer {

  position: absolute;

  bottom: 0;

  width: 100%;

  /* Set the fixed height of the footer here */

  height: 60px;

  line-height: 60px; /* Vertically center the text there */

  background-color: #f5f5f5;

}

.mainClass {

  height: calc(100vh - 40px);

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>

    <nav style="color:white;" class="navbar navbar-dark bg-dark">

        Navbar

    </nav>

</header>

<main style="background:grey;color:white;width:100%;" role="main" class="container mainClass">

    <p>

        Pin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin aliquam nisl, ut elementum eros volutpat ac. Aliquam erat volutpat. Fusce felis urna, cursus vel arcu vitae, egestas ornare nulla. Integer aliquam volutpat justo, vitae pharetra mi luctus ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel magna a ligula viverra posuere. Integer a augue id nunc hendrerit molestie. Morbi tempor sapien tellus, non dignissim ex dignissim sit amet. Suspendisse sed sodales mauris, et blandit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu posuere elit.

    </p>

</main>

<footer class="footer">

    <div class="container">

        <span class="text-muted">Place sticky footer content here.</span>

    </div>

</footer>