См. Решение с Bootstrap 4 ниже:
html,
body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
}
footer span {
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="site-wrapper d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus felis id mauris molestie laoreet. Integer sed purus tempor, mollis nisi sit amet, varius nunc. In malesuada mattis placerat. Fusce vel dui at felis semper cursus. Nulla scelerisque,
eros id pellentesque molestie, sem urna fringilla urna, porttitor vehicula nisl augue sit amet dui. Etiam interdum congue venenatis. Ut ac ornare massa. Morbi sed dui posuere, tincidunt est a, eleifend nisl. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Sed tincidunt laoreet odio, et consequat neque lobortis vel. Duis tortor ex, efficitur at efficitur ut, feugiat eleifend ligula. Nullam ultrices vitae tellus a elementum. Nam luctus, ligula ut varius hendrerit, metus quam congue
dui, tempor maximus tortor nulla ac metus. Vestibulum dignissim nisl nec suscipit dictum. Phasellus vehicula eu purus ac dictum. Pellentesque sollicitudin scelerisque ipsum, sit amet tempus turpis condimentum posuere.
</p>
<p>
Nullam est dui, laoreet quis tincidunt quis, iaculis ut purus. Maecenas semper nunc eget tincidunt pellentesque. Phasellus lobortis tellus enim, vitae accumsan ligula tincidunt sit amet. Proin bibendum, leo vel laoreet vestibulum, ante erat pharetra ligula,
mattis rutrum ligula felis non tortor. In hac habitasse platea dictumst. Vestibulum condimentum elit nec libero tempor ultrices. Vivamus velit elit, accumsan vel velit rutrum, laoreet fringilla lectus. Mauris vitae lectus mollis, viverra nulla non,
sollicitudin eros. Nam tincidunt nulla et nulla convallis gravida. Fusce neque turpis, mollis sit amet nisl sit amet, interdum sollicitudin odio. Sed porta purus eget sem mollis, in lobortis lacus venenatis. Duis id tristique orci. Morbi dapibus
a felis et imperdiet. Vestibulum fermentum euismod sem at mattis. Nulla efficitur, est eget sollicitudin malesuada, nulla turpis pellentesque felis, euismod semper libero nibh eu tellus. Integer lacus leo, ultricies quis porttitor luctus, pretium
vel nibh.
</p>
<p>
Suspendisse in lectus lacinia, mattis ligula nec, malesuada arcu. Sed sodales metus odio, eget imperdiet felis pellentesque vitae. Nulla tincidunt, diam et rutrum ultrices, justo felis dictum magna, in lacinia nisl sem eget nunc. Morbi fringilla mauris
venenatis euismod vulputate. Nunc blandit urna et nunc venenatis ultricies. Pellentesque tempor quam eu sodales facilisis. In ornare porta pellentesque. Pellentesque cursus maximus posuere.
</p>
<p>
Curabitur commodo tristique mi congue tincidunt. Pellentesque quis viverra nunc. Aliquam aliquam nec arcu ut scelerisque. Donec mattis lacus in aliquet iaculis. Aliquam eget nunc vitae ligula iaculis euismod at ut justo. Fusce feugiat commodo erat, consectetur
auctor neque vulputate eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper nunc et blandit sagittis. Aenean nibh nunc, eleifend ac vulputate in, sodales quis erat. Vestibulum porta quam
vitae mollis tristique. Proin dolor sem, tempor sit amet facilisis et, sagittis porttitor nisl. Phasellus venenatis cursus lorem, facilisis vestibulum libero cursus id. In sed finibus metus. Aenean convallis massa at turpis lacinia lobortis. Praesent
scelerisque ligula vel magna pharetra, eu condimentum nisl egestas.
</p>
</div>
<footer class="mt-auto bg-dark p-2">
<div class="container text-center">
<span>Footer Text</span>
</div>
</footer>
</div>
Обратите внимание, что он поддерживает переменную высоту нижнего колонтитула.
Дайте мне знать, если он соответствует вашим потребностям.