I am facing troubles while attempting to utilize the sticky-footer-wrapper feature from Bootstrap in order to keep the footer fixed at the bottom of the page. However, instead of staying at the bottom, it just appears right after the content on the page finishes. Below is my Index.cshtml
@{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XXXX</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="/Content/ionicons.min.css" rel="stylesheet" />
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
</head>
<body>
<div class="d-flex flex-column sticky-footer-wrapper">
<app-root></app-root>
<footer class="container-fluid w-100 bg-info text-light py-3">
<div id="copyright">
<a target="_blank" href="https://www.company.net/"><img src="/Content/img/xxxlogo_footer.png" alt="xxx Footer Logo" /></a>
<span>xx.com is the global source of information about and access to services provided by the xxx companies.</span>
<span class="pull-right copyright">© 2019 xxxgroup Inc.</span>
</div>
</footer>
</div>
<script type="text/javascript" src="~/Scripts/client/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/client/polyfills.js"></script>
@if (HttpContext.Current.IsDebuggingEnabled)
{
<script type="text/javascript" src="~/Scripts/client/styles.js"></script>
<script type="text/javascript" src="~/Scripts/client/vendor.js"></script>
}
<script type="text/javascript" src="~/Scripts/client/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
In an attempt to add padding or spacing at the bottom for the component template, I wrapped the contents within a container as shown below:
<div class="container mb-3 pb-3" ></div>
However, even after applying this method, the issue still persists. Any guidance on how to resolve this would be greatly appreciated.