Fix footer position bottom when page have a little content in Vartheme BS4

Problem/Motivation

When there are not enough content, the footer will rise to the top.

Steps to reproduce

Open any page, and make it with a little content [one paragraph as an example], and then look to the footer, it will rise to the top.

Proposed resolution

Have the following changes on both vartheme_bs4 and VARTHMEM_BS4_SUBTHEME template.

• Change min-height: 100vh for the page
• Change to stick the footer to the bottom
• Add mb-5 on last div before the footer-wrapper in the page to add spacing before footer

{# Main #}
{% block main %}
  <div role="main" class="main-container {{ container }} js-quickedit-main-content mb-5">
      .....
      .....
      .....
  </div>
{% endblock %}

{% if page.footer %}
  {% block footer %}
    <div class="footer-wrapper">
      <footer class="footer {{ container }}" role="contentinfo">
        {{ page.footer }}
      </footer>
    </div>
  {% endblock %}
{% endif %}

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ✅ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-9.0.7, vartheme_bs4-9.0.15

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

Before:

After [With less content]:

After [with large content]:

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Issue #3280063 by Abdullah Yassin, Alaa Jwiehan: Fixed footer position bottom when page have a little content in Vartheme BS4