Currently, I am in the process of developing a commandline tool to quickly generate an HTML Bootstrap starter template for my personal use. The main issue I am facing is with the index page, where a basic navigation bar should be displayed at the top, and a footer should stick to the bottom of the page. This template has worked flawlessly for previous projects, but inexplicably, it is not working as expected now. Instead of the content being displayed properly, everything is stuck at the top of the page. Upon inspecting the page, I noticed that the entire HTML tag's contents are at the top, leaving the rest of the document blank. Below is the HTML code snippet in question:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="static/css/custom.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<title>Bootstrap Starter</title>
</head>
<body class="d-flex flex-column">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-text">
<a href="/">Bootstrap Starter</a>
</span>
</nav>
<div class="container content"></div>
<div class="footer">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7b7a8b7b7a2b5e9adb487f6e9f6f1e9f7">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="p-4 mt-5 bg-light text-center"><small>© Your Name, </small></div>
</div>
</body>
</html>
Attached CSS code snippet:
* custom styles */
html, body {
height: 100% !important;
}
.content {
flex: 1 0 auto !important;
}
If anyone could provide insight into why this setup is not yielding the expected results, I would greatly appreciate it. Thank you.