Question 42825 in Html Question posted in
Some basic documentation can be found here.

Pushing a footer to the bottom of a page using bootstrap – Html

I am creating a page using bootstrap 4.5.2 (which i havent used before) and want to push a footer to the bottom of a page automatically rather than absolute positioning it.

I tried using mt-auto on the footer class, and a d-flex flex-column min-vh-100 on the body, but that pushed it to the bottom of the top part of the page, not the whole page itself.

Maybe the bootstrap I’m using is outdated or something along the lines, but I’m not sure.

Ill attach a demo (works best full screen). Its not perfect, but you get the idea, the footer is pushed to bottom of the top100%, not the bottom of the whole page. Any ideas?

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,600;1,700;1,800;1,900;1,1000&family=Oswald:wght@200;300;400;500;600;700&display=swap');
:root {
  --nunito: 'Nunito', sans-serif;
  --oswald: 'Oswald', sans-serif;
}

h1,
p,
a {
  padding: 0;
  margin: 0;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: #1e1e1e;
}

.top-nav {
  position: absolute;
  top: 58px;
  left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.top-nav a {
  white-space: nowrap;
  color: #f2f2f2;
  font-family: var(--nunito);
  display: flex;
  align-items: center;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 27px;
  margin-left: 64px;
  text-decoration: none;
  cursor: pointer;
}

.top-nav a:nth-child(3) {
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 44px;
  letter-spacing: 0.29em;
}

.top-nav a span {
  font-style: normal;
  font-weight: 200;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  text-align: center;
  margin-left: 32px;
}

@media screen and (min-width: 2560px) {
  .top-nav a {
    white-space: nowrap;
    color: #f2f2f2;
    font-family: var(--nunito);
    display: flex;
    align-items: center;
    text-align: center;
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
    line-height: 27px;
    margin-left: 100px;
    text-decoration: none;
    cursor: pointer;
  }
  .top-nav a:nth-child(3) {
    font-style: italic;
    font-weight: 300;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 0.29em;
  }
  .top-nav a span {
    font-style: normal;
    font-weight: 200;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    text-align: center;
    margin-left: 60px;
  }
}


/* HOME PAGE 1 */

.home-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://source.unsplash.com/OyCl7Y4y0Bk);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* HOME PAGE 2 */

.home-2 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://source.unsplash.com/OyCl7Y4y0Bk);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-2 h1 {
  position: absolute;
  left: 400px;
  top: 171px;
  font-style: normal;
  font-weight: 600;
  font-size: 40px;
  line-height: 47px;
  display: flex;
  align-items: center;
  letter-spacing: 0.03em;
}

.home-2 p {
  position: absolute;
  left: 400px;
  top: 232px;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 27px;
}

.home-2 a {
  position: absolute;
  left: 400px;
  top: 300px;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  display: flex;
  align-items: center;
  text-align: center;
  width: 64px;
  height: 34px;
  padding: 9px 24px;
  border: 3px #f2f2f2 solid;
  border-radius: 2px;
  white-space: nowrap;
  color: #f2f2f2 !important;
}

.home-2 h1,
p,
a {
  font-family: var(--oswald);
  color: #f2f2f2 !important;
}


/* HOME PAGE 3 */

.home-3 {
  position: absolute;
  top: 200%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://source.unsplash.com/OyCl7Y4y0Bk);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-3 h1 {
  position: absolute;
  right: 565px;
  top: 250px;
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 47px;
  display: flex;
  align-items: center;
  text-align: right;
  letter-spacing: 0.03em;
}

.home-3 p {
  position: absolute;
  right: 570px;
  top: 300px;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  display: flex;
  align-items: center;
  text-align: right;
}

.home-3 a {
  position: absolute;
  right: 577px;
  top: 350px;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  display: flex;
  align-items: center;
  text-align: center;
  width: 64px;
  height: 34px;
  padding: 9px 24px !important;
  margin: 0 !important;
  border: 3px #f2f2f2 solid;
  border-radius: 2px;
  white-space: nowrap;
}

.home-3 h1,
p,
a {
  font-family: var(--oswald);
  color: #f2f2f2;
}


/* FOOTER */


/*
.footer {
    position: absolute;
    right: 0;
    top: 300%;
    left: 0;
    width: 100%;
    background-color: #1e1e1e;
}
*/

.footer {
  background: #1e1e1e;
  color: white;
}

.footer .links ul {
  list-style-type: none;
}

.footer .links li a {
  color: white;
  transition: color 0.2s;
}

.footer .links li a:hover {
  text-decoration: none;
  color: #4180CB;
}

.footer .about-company i {
  font-size: 25px;
}

.footer .about-company a {
  color: white;
  transition: color 0.2s;
}

.footer .about-company a:hover {
  color: #4180CB;
}

.footer .location i {
  font-size: 18px;
}

.footer .copyright p {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FleAuto</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body class="d-flex flex-column min-vh-100">
  <div class="home-top">
    <div class="top-nav">
      <a href=""><img src="/imagesdesign/home.png"></a>
      <a href=""><img src="/imagesdesign/profile.png"></a>
      <a href=""><img src="/imagesdesign/logo.png"></a>
      <a href="/portfolio.html"><img src="/imagesdesign/portfolio.png"></a>
      <a href=""><img src="/imagesdesign/contact.png"></a>
    </div>
  </div>
  <div class="home-2">
    <h1>EXCELLENCEY FROM THE BEGGINING.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis, justo sit amet sagittis sodales, tellus libero pellentesque lectus, at posuere erat orci vitae odio.
    </p>
    <a href="">My Profile</a>
  </div>
  <div class="home-3">
    <h1>GET UP CLOSE AND PERSONAL.</h1>
    <p>lorem impsuem</p>
    <a href="/portfolio.html">Portfolio</a>
  </div>

  <footer class="pt-5 pb-5 footer mt-auto">
    <div class="container">
      <div class="row">
        <div class="col-lg-5 col-xs-12 about-company">
          <h2 class="mt-lg-0 mt-sm-4 text-white-50">Contact</h2>
          <p class="text-white-50">Contact regarding bookings, shoots, photos and more.</p>
          <p class="text-white-50">Based in xxxxx</p>
          <p class="text-white-50">To make a booking or get in touch, please use the information provided.</p>
          <p><a target="_blank" rel="noopener noreferrer" href=""><i class="fa-brands fa-instagram mr-3 text-white-50"></i></a>
            <a target="_blank" rel="noopener noreferrer" href=""><i class="fa-brands fa-tiktok text-white-50"></i></a>
          </p>
        </div>

        <div class="col-lg-6 col-xs-12 location tex">
          <h4 class="mt-lg-0 mt-sm-4 text-right text-white-50 font-italic">[logo]</h>
            <p class="mb-0 text-right text-white-50"><i class="fa fa-phone mr-3"></i>(541) 754-3010</p>
            <p class="text-right text-white-50"><i class="fa fa-envelope-o mr-3"></i>[email protected]</p>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col copyright">
          <p class=""><small class="text-white-50">© 2023  | All Rights Reserved | T&C. <br><span>Website by </span></small></p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</body>

</html>
Tags:

2

Answers


  1. 0

    You are positioning the elements above the footer with position: absolute which means they are taken out of the content flow. Now your footer is the first element in the flow and by that right at the top. Change the position value of your other elements and it will be at the end.

    .home-top {
  /* ... */ 
  position: absolute; /* change this */ 
  /* ... */ 
}

    https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute

    Login or Signup to reply.
  2. 0

    You should try to add the class "fixed-bottom" to your footer element.

    https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

    Is there any reason why you don’t use Bootstrap 5?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search