CODEWITHSUNDEEP
htmlcssbootstrap-4
mads30
mads30

Reputation: 23

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

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;
}

Upvotes: 2

Views: 7047

Answers (3)

Felix Geenen
Felix Geenen

Reputation: 2707

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/

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 6

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

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.

result

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>

Upvotes: 3

Related Questions