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

Html – Why is does my footer stuck in the middle of the webpage?

I tried everything but my footer is stuck in the middle, I even set the body height to 100%/100vh.
footer in the middle (https://phpout.com/wp-content/uploads/2024/01/qzp2i.png)
css:

body {
display: flex;
flex-direction: column;
font-family: "Poppins", sans-serif;
font-family: "Righteous", sans-serif;
font-family: "Roboto", sans-serif;
}
.navbar-nav li a:hover {
color: #536976 !important;
}
.d-flex {
width: 100%;
}
.footer {
width: 100%;
text-align: center;
height: 30px;
margin-top: auto;
position: absolute;
bottom: 0px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
.padding {
padding-top: 20px;
}

.form-hide {
margin: 0px;
padding: 0px;
}
.delete-btn {
margin: 0px;
padding: 0px;
}
.panel-body {
padding: 15px;
text-overflow: ellipsis;
overflow: hidden;
}
.inline {
display: inline;
}

.compose {
margin-top: 50px;
height: calc(100vh - 80px);
}
.post {
margin-top: 50px;
}
.content {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.journee {
background: #536976;
background: -webkit-linear-gradient(to right, #484e76, #536976);
background: linear-gradient(to left, #484e76, #536976);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

footer:

<footer class="bg-body-tertiary text-center text-lg-start"> <!-- Copyright --> <div class="text-center p-3" style="background-color: #000"> © 2020 Copyright: <a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a> </div> <!-- Copyright --> </footer>

I tried to keep it fixed with position: fixed.
also the footer is stuck under the posts
i dont know whats happening
i am using bootstrap 5

Tags:

2

Answers


  1. 0

    It looks like you’re using Bootstrap 5 and have some custom styles for your footer. To centre the footer at the bottom of the page, you can make use of the Bootstrap utilities.

    Here’s an updated version of your CSS and HTML:

    CSS:

    body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: "Poppins", sans-serif;
  /* Add other font families as needed */
}

.footer {
  width: 100%;
  text-align: center;
  padding: 15px; /* Add padding to give some space */
  background-color: #000;
  color: #fff;
}

.footer p {
  margin-top: 10px; /* Adjust margin as needed */
  font-size: 12px;
}

.compose {
  margin-top: 50px;
  flex: 1; /* Use flex to fill the remaining space */
}

.post {
  margin-top: 50px;
}

.journee {
  background: #536976;
  background: -webkit-linear-gradient(to right, #484e76, #536976);
  background: linear-gradient(to left, #484e76, #536976);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

    HTML:

    <body>
  <!-- Your content goes here -->

  <footer class="footer">
    <!-- Copyright -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          © 2020 Copyright:
          <a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
        </div>
      </div>
    </div>
  </footer>
</body>

    Key points:

    1. I added min-height: 100vh to the body to ensure that it takes at least the full height of the viewport.
    2. Removed unnecessary styles from the footer.
    3. Used Bootstrap’s container and row classes to centre the content in the footer.

    Make sure to adjust the margin, padding, and other styles based on your specific design requirements.

    Login or Signup to reply.
  2. 0

    Without the full HTML structure, it’s difficult to understand what is wrong with the code. Please post the HTML as well that will help others to understand the issue easily.

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

Back To Top
Search