Make footer stick to bottom of page using Twitter Bootstrap

user_1150534 0
Viewed 210716

I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.

I have put all my pages in a "holder"

#holder {
  min-height: 100%;
  position:relative;
}

And then used the following CSS for my footer

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

The html for my footer

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

I would like to keep the footer fluid.

twitter-bootstrap css
8 Answers

Most of the above mentioned solution didn't worked for me. However, below given solution works just fine: 

<div class="fixed-bottom">...</div>

Source

user_53495420

It could be easily achieved with CSS flex. Having HTML markup as follows:

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

Following CSS should be used:

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ

user_12746640

I have found a simple solution for this. For body tag add <body class="d-flex flex-column min-vh-100">. On footer tag add class

mt-auto

The entire code looks as follows

<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>

This is working for bootstrap 4+ and tested till 5 beta 1

user_16738600
Related