Your css was moved into the document and now it works. What this indicates to me is an issue with the external stylesheet. I notice that you have 2 custom stylesheets, 1 before 3rd party stylesheets and 1 after. The browser respects the order, so if your code was in the first stylesheet the 3rd party stylesheets may have overwritten your custom rules.
Solution 1 :
Problem :
I am writing a commandline tool for myself to generate a quick html bootstrap starter and I have an index page, which is supposed to include a basic navbar at the top and a footer that sticks to the bottom of the page. I have used this same template before for other projects and it worked perfectly. But for some reason it won’t work now. all the content is stuck at the top of the page. If I inspect the page, the entire html tag contents are at the top of the page and most of the page is blank document. Here is the html:
<!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">
<!-- Navbar-->
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-text">
<a href="/">Bootstrap Starter</a>
</span>
</nav>
<!-- Content -->
<div class="container content"></div>
<!-- Footer-->
<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/[email protected]/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><!-- Footer bar-->
<div class="p-4 mt-5 bg-light text-center"><small>© Your Name, </small></div>
</div>
</body>
</html>
And here is the css:
* custom styles */
/* Sticky footer */
html, body {
height: 100% !important;
}
.content {
flex: 1 0 auto !important;
}
Can anyone tell me why this isn’t producing the desired result? Thanks.
Comments
Comment posted by Amaresh S M
check it properly u r code working now
Comment posted by Michael Alexander
@AmareshSM Sorry but I have no idea what you are saying.
Comment posted by Amaresh S M
just click run code snippet it works perfectly footer is present at the bottom and nav is at the top
Comment posted by Sydney Y
He’s saying he changed the code in your question and now it works. Which is really not how SO operates, but I guess that works.
Comment posted by Amaresh S M
i haven’t modified any code just inserted the code into snippet
Comment posted by Michael Alexander
Thanks for your input. I am using the
Comment posted by Sydney Y
Is the filepath correct? Open your browsers dev tools and look in the network to see if the custom stylesheet was fetched correctly. (Or sources tab if your not using a server)
Comment posted by Michael Alexander
I just discovered the problem and it was literally a syntax error in the comment at the top of the custom stylesheet. So the file was loading but the css wasn’t interpreted by the browser. Sigh. That escaped everyone who commented on this too. The human brain really didn’t evolve to see minute details. Thanks everyone for your help.
Comment posted by Sydney Y
It might have been easier if someone hadn’t