A proper sticky footer at the bottom of the viewport

frontend/templates/base.html.jinja

@@ -16,6 +16,7 @@
   {% block extraheader %}{% endblock %}
 </head>
 {% block body %}
+  <div class="d-flex flex-column min-vh-100">
     <!--BIG TITLE WITH LOGO-->
     <div class="jumbotron text-center" style="margin-bottom:0">
       <h1>eFlows4HPC Data Catalog</h1>
@@ -37,20 +38,20 @@
       </div>
     </nav>
     
-    
     <ul class="nav navbar-nav">
     </ul>
 
     <!--SPECIFIC PAGE CONTENT-->
-    <div class="d-flex flex-column min-vh-75">
     {% block content%}
     {% endblock %}
-    </div>
+
+    <div class="flex-grow-1"></div>
 
     <!--FOOTER-->
     {% block footer %}
       {% include 'footer.html.jinja' %}
     {% endblock %}
+  </div>
 
   <!--SHARED JAVASCRIPT--> 
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

frontend/templates/footer.html.jinja

@@ -3,7 +3,7 @@
 {% endblock %}
 
 {% block footer %}
-<footer class="footer d-inlign-flex">
+<footer class="footer mt-auto flex-shrink-0 d-inlign-flex">
     <div class="container-fluid p-0">
       <div class="eflows-line"></div>
       <div class="row mt-2 px-3">