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;}Best Answer
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
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>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/
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/[email protected]/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.