I have a website where some pages have a lot of elements (scrolling exists), while other pages have only few elements (scroll doesn't exist). What I'm trying to do, is to create my footer to be always at the bottom of the page no matter how big or small that page is.
The bootstrap footer I'm using is the following:
<footer class="text-center text-white bg-dark text-center">
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold">Sun Dance Services</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p>
Here you can use rows and columns to organize your footer
content. Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold">Countries</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p><i class="fas fa-home mr-3"></i>United Kingdom</p>
<p><i class="fas fa-envelope mr-3"></i>Cyprus</p>
<p><i class="fas fa-phone mr-3"></i>Ireland</p>
<p><i class="fas fa-print mr-3"></i>United States</p>
</div>
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold">Useful links</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p>
<%= link_to 'Home Page', root_path, class:"text-white" %>
</p>
<p>
<%= link_to 'About Us', home_about_path, class:"text-white" %>
</p>
<p>
<%= link_to 'Products & Services', home_products_path, class:"text-white" %>
</p>
</div>
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold">Contact</h6>
<hr
class="mb-4 mt-0 d-inline-block mx-auto"
style="width: 60px; background-color: #7c4dff; height: 2px"
/>
<p><i class="fas fa-home mr-3"></i> New York, NY 10012, US</p>
<p><i class="fas fa-envelope mr-3"></i> info@example.com</p>
<p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
© 2021 Copyright:
<a class="text-white" href="https://mdbootstrap.com/"
>Sun Dance Services</a
>
</div>
</footer>
I tried <footer class="text-center text-white bg-dark text-center fixed-bottom"> which solves this issue only for small content pages. It will set the footer at the lowest position (scrolling does NOT exists here). SEE SCREEN SHOT 1!
However, when the page is large there are two issues:
- Footer appears always at the bottom of page (when the scroll position is at the top of the page the footer appears).
- Footer hides elements that are at the end (please see SCREEN SHOT 2 below).
What I want to do:
- Have the footer at the end of the page whether the content is small or large.
- Hide the footer when scrolling is not at the bottom of the page.
- I don't want the footer to be fixed.
- I would prefer if I use plain bootsrap instead of CSS.
