I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example:
.footer {
height: 120px !important;
line-height: 120px !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.1/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
</head>
<body>
<!-- Begin page content -->
<main role="main" class="container">
<h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with custom HTML and CSS.</p>
...content continues...
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>In my experience, setting the height of the footer to 120px can cause it to overlap the content if there is a lot of content on the page. To fix this issue while using standard CSS rules, you may need to adjust the height dynamically based on the amount of content present. This can help prevent the footer from overlapping the content. Keep in mind that this template uses Bootstrap as a base. Feel free to modify it according to your needs.