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

Question

I'm very new to this and building my first webpage with HTML & CSS. I've been using the Bootstrap 4.5 framework. I am trying to get my footer with social media icons to stay at the bottom (below the text) and stay centered. I want it to stay at the bottom even past the viewport.

I've tried: using flexbox and justify-content-center, tried text-align center in the CSS itself, also tried to add an id to make it more specific but not sure if my understanding of specificity in this case is correct. Would appreciate some advice, code as below.

HTML:

<div class="footer">
    <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>

CSS:

i {
    margin: 5px;
    color: #FFE10E;
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
}

#bottom {
    text-align: center;
}

what exactly is the problem? is the footer not positioned correctly at the bottom or is it (or the content) not centered? or both? — Felix Geenen, Sep 09 '20 at 12:40

score 4 · Accepted Answer · answered Sep 09 '20 at 12:34

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

Followed your bottom link and eventually solved it with this: https://www.codeply.com/p/kigBzL24ZV, so added d-flex flex-column sticky-footer-wrapper min-vh-100 to the body element and it worked. Thank you! — mads30, Sep 09 '20 at 13:56

score 1 · Answer 2 · answered Sep 09 '20 at 12:12

To fix your code you should give the footer: left of 0 and width: 100% and it will work. and that worked for me actually. If it didn't work for you may need to add more CSS for us.

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #232323;
    text-align: center;
}

Here is how it looks.

Also, I added an example to make it stick in a different way.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  margin-bottom: 50px;
}

.footer {
  flex-shrink: 0;
  background-color: aquamarine;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer
</footer>

<script>
  $("#add").on("click", function() {
    $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
  });
</script>

this one is a nice solution, my only question is why do we need the left:0 ? It actually worked the same for me without left:0 — Farid Huseynov, Sep 10 '20 at 10:56

score 0 · Answer 3 · answered Sep 09 '20 at 12:47

0

You can also use position: fixed; on the footer element. Don't forget to set width: 100%; to get the text centered.

https://jsfiddle.net/0315eqax/1/

answered Sep 09 '20 at 12:47

Felix Geenen

2,465
1
28
37

score 0 · Answer 4 · edited Jan 07 '21 at 09:32

You can use CSS Flex Layout to align item(icons) on footer. Also you can use flex layout in Bootstrap.

Align items

 <div class="d-flex align-items-center">...</div>

Justify content

 <div class="d-flex justify-content-center">...</div>

Change the color of font icon

 <a href="#"><i class="fa fa-twitter text-white"></i></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JQuery</title>
    <style>
        .footer{
            height: 55px;
            justify-content: space-between;
        }

    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="footer d-flex justify-content-center align-items-center bg-secondary text-white">
    <span id="bottom">
        <hr>
        <p>
            <a href="#"><i class="fa fa-twitter text-white"></i></a>
            <a href="#"><i class="fa fa-instagram text-white"></i></a>
            <a href="#"><i class="fa fa-facebook text-white"></i></a>
       </p>
    </span>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

`

Set both the justify-content and align-items properties to center

I hope this update may help you to understand about CSS flex layout.

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

4 Answers4