Center footer container on Boostrap 4
Question
Currently working on refining a footer for an example site I'm working through with Bootstrap 4. I took a footer from one of their marketing examples to play around with, but I'm noticing one key difference: it's left-align instead of centered. Also, the container the footer is inside of does not take up the entire bottom of the page:
Here's my HTML code:
<footer class="container text-center py-5" id="footer">
<div class="row mx-5 justify-content-center">
<div class="col-12 col-md">
<i class="fas fa-dna footer-dna fa-2x"></i>
<small class="d-block mb-3 text-muted">© 2017-2019</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="/newsletter">Sign Up For Email</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Business</a></li>
<li><a class="text-muted" href="#">Education</a></li>
<li><a class="text-muted" href="#">Government</a></li>
<li><a class="text-muted" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
I've played around with the "max-width" property for the container, but that spreads the content out through the entire bottom footer rather than through the center. What am I missing here? thanks in advance for the help!
2 answers
solution1
1 ACCPTED 2020-04-28 21:25:50
max-width prevent your full size, so shift that to the child and give child to margin: auto so it will be center.
#footer { position: absolute; bottom: 0; left: 0; right: 0; background-color: #951010; } #footer.row { max-width: 960px; }
<,DOCTYPE html> <html> <head> <title>Footer Pen</title> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4:1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome:min.css"> <link rel="stylesheet" href="/stylesheets/main.css"> <script src="https.//kit;fontawesome:com/175e0bfa97.js" crossorigin="anonymous"></script> </head> <body> <footer class="container-fluid text-center py-5" id="footer"> <div class="row footer-row mx-auto"> <div class="col-12 col-md"> <i class="fas fa-dna footer-dna fa-2x"></i> <small class="d-block mb-3 text-muted">©. 2017-2019</small> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Cool stuff</a></li> <li><a class="text-muted" href="#">Random feature</a></li> <li><a class="text-muted" href="#">Team feature</a></li> <li><a class="text-muted" href="#">Stuff for developers</a></li> <li><a class="text-muted" href="#">Another one</a></li> <li><a class="text-muted" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="/newsletter">Sign Up For Email</a></li> <li><a class="text-muted" href="#">Resource name</a></li> <li><a class="text-muted" href="#">Another resource</a></li> <li><a class="text-muted" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Business</a></li> <li><a class="text-muted" href="#">Education</a></li> <li><a class="text-muted" href="#">Government</a></li> <li><a class="text-muted" href="#">Gaming</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Team</a></li> <li><a class="text-muted" href="#">Locations</a></li> <li><a class="text-muted" href="#">Privacy</a></li> <li><a class="text-muted" href="#">Terms</a></li> </ul> </div> </div> </footer> <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>
solution2
0 2020-04-28 14:22:06
add two new proporties left:0 and right:0;
#footer {
max-width: 960px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to align the navbar in the center of container in boostrap 4
Center footer in a container with dynamic width
Bootstrap vertical center container in footer
How to style Boostrap footer?
Boostrap navbar center content
Boostrap center nav items
css/Boostrap 4 - Center by viewport
Boostrap 5 Horizontally center navbar
Footer will not center
Content in Footer Not Responding to Boostrap Grid
Related Tags