CODEWITHSUNDEEP
htmlcssruby-on-rails
Kamidesu
Kamidesu

Reputation: 111

Footer is not sticking to the bottom [Rails 7 Boostrap]

This is my custom

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
 }

and my page is like

  <body>

  <%= render "layouts/navigations"%>
  
  <div class="container">
   <%= render "layouts/messages"%>
      <%= yield %>
  </div>
  
  <%= render "layouts/footer"%>

  </body>

<footer class="footer mt-auto py-3 bg-dark text-center">
  <!-- Copyright -->
  <div class="text-center p-3 mt-2 text-light" ">
    © 2022 Copyright:
  </div>
  <!-- Copyright -->
</footer>

Not sure why it does not work with my app (but actually previously worked in my old rails 6 app. Really sorry for this simple question as I just came back to try learning web app again and getting stuck with this kind of issue.

Upvotes: 0

Views: 292

Answers (1)

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

It is working fine in this example. Please provide the working example so that we can find what is causing the issue.

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
}
.container {
    background: #d9fbff;
    height: 900px;
    padding: 0;
}
<html>
<body>
  
  <div class="container">
  </div>

  <footer class="footer mt-auto py-3 bg-dark text-center">
  <div class="text-center p-3 mt-2 text-light">
    © 2022 Copyright:
  </div>
  </footer>

  </body>
</html>

Upvotes: 1

Related Questions