I'm struggling with one thing. I'm iterating objects which create some sort of row table (the new one is always below the previous one). I tried to add footer but the issue arises when I'm displaying more than 18 elements per page, it overlaps it:
Example:
My html:
<body>
<div id="main" class="d-flex flex-column h-100">
<div class="container h-100">
{% include 'navbar.html' %}
{% block content %}{%endblock%}
</div>
{% include 'footer.html' %}
</div>
<script src="{% static 'js/vue2.js' %}" type="text/javascript"></script>
</body>
How can I make this table to push the footer all the way down depends on its size ?
@edit footer:
<footer class="bg-dark text-white text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">fastIT</h5>
<p>
Find more
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">Project</a>
</li>
<li>
<a href="#!" class="text-white">Scraping sources</a>
</li>
<li>
<a href="#!" class="text-white">Rules</a>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">ledi12</a>
</div>
</footer>
