I have a problem with a footer for a website I am developing. There is an active carousel on the homepage. The footer moves slightly up leaving space below it at certain times. Could this contribute to the footer? I would like to have the footer in a stationary/fixed position. Any help or ideas are greatly appreciated. Thanks!
Here is the HTML markup below:
<footer class="bg-info">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div><img src="images/Heart_n_hands.png" class="float-left" alt="logo" style="width:100px;">
<span class="font-weight-bold">Our Neighbor Association</span> <br>
<span>© Copyright 2018</span>
</div>
</div>
<div class="col-md-4">
<address class="font-weight-bold">1200 W Smithfeld Avenue Somewhereville, MI 48326 <br> (888)-555-1234</address>
</div>
<div class="col-md-4">
<span class="font-weight-bold">Sign up for Updates!</span>
<form action="#" method="post">
<div class="form-control bg-light">
<label><small class="font-weight-bold">E-Mail:
<input type="text" name="eMail" id="eMail" autoplete="email" placeholder="Enter you E-Mail!" pattern="" required>
</small></label>
<input class="btn btn-primary btn-sm" type="submit" name="submit" id="submit" value="Subscribe">
</div>
</form>
</div>
</div>
</div>
</footer>I have a problem with a footer for a website I am developing. There is an active carousel on the homepage. The footer moves slightly up leaving space below it at certain times. Could this contribute to the footer? I would like to have the footer in a stationary/fixed position. Any help or ideas are greatly appreciated. Thanks!
Here is the HTML markup below:
<footer class="bg-info">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div><img src="images/Heart_n_hands.png" class="float-left" alt="logo" style="width:100px;">
<span class="font-weight-bold">Our Neighbor Association</span> <br>
<span>© Copyright 2018</span>
</div>
</div>
<div class="col-md-4">
<address class="font-weight-bold">1200 W Smithfeld Avenue Somewhereville, MI 48326 <br> (888)-555-1234</address>
</div>
<div class="col-md-4">
<span class="font-weight-bold">Sign up for Updates!</span>
<form action="#" method="post">
<div class="form-control bg-light">
<label><small class="font-weight-bold">E-Mail:
<input type="text" name="eMail" id="eMail" autoplete="email" placeholder="Enter you E-Mail!" pattern="" required>
</small></label>
<input class="btn btn-primary btn-sm" type="submit" name="submit" id="submit" value="Subscribe">
</div>
</form>
</div>
</div>
</div>
</footer>- what css you are using for footer ? – Shiv Kumar Baghel Commented Aug 14, 2018 at 2:23
- Check this bootstrap 4 sticky footer template – claudios Commented Aug 14, 2018 at 3:34
4 Answers
Reset to default 3Use d-flex from Bootstrap 4, here is my code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery./jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<html>
<style>
html,body{
height:100%;
}
</style>
<body class="d-flex flex-column">
<div class="flex-fill">
(main div) i fill the black space
</div>
<footer class="mt-auto bg-info">Footer always down,at any height</footer>
</body>
</html>First, the body and html fill the page with 100% height.
Then, "d-flex flex-column" class body will arrange all element inside in vertical direction.
Use "mt-auto" to make footer stay on bottom.
Last make your main container "flex-fill" so the container will fill up the empty space.
The provided solution for a sticky footer in Bootstrap 4 is sticky footer:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
/* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Set the fixed height of the footer here */
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
/* Not required */
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css">
<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 this custom HTML and CSS.</p>
<p>Use <a href="http://getbootstrap./docs/4.1/examples/sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>If you want a solution which keeps the footer down when page is short but lets it stay below longer pages (not fixed), you could use flexbox. It also has the huge advantage footer doesn't need to have a fixed height here:
html {
position: relative;
min-height: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer {
flex-grow: 0;
padding: 15px 0;
display: block;
background-color: #f5f5f5;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.3/css/bootstrap.min.css">
<main role="main" class="container">
<h1 class="mt-5">Sticky footer</h1>
<p class="lead">This one has the advantage you don't need to set a fixed height for footer (which would need to be the <code><body></code>'s bottom margin).</p>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place footer content here.</span>
</div>
</footer>use navbar navbar-fixed-bottom class in footer tag.
<footer class="navbar navbar-fixed-bottom bg-info">
content...
</footer>
for fix footer, must use this code in HTML and CSS codes
body,html{
height:100%;
}
.main{
height:auto;
min-height:100%;
}<div class="main">
<h1>your contents here</h1>
</div>
<footer class="bg-info">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div><img src="images/Heart_n_hands.png" class="float-left" alt="logo" style="width:100px;">
<span class="font-weight-bold">Our Neighbor Association</span> <br>
<span>© Copyright 2018</span>
</div>
</div>
<div class="col-md-4">
<address class="font-weight-bold">1200 W Smithfeld Avenue Somewhereville, MI 48326 <br> (888)-555-1234</address>
</div>
<div class="col-md-4">
<span class="font-weight-bold">Sign up for Updates!</span>
<form action="#" method="post">
<div class="form-control bg-light">
<label><small class="font-weight-bold">E-Mail:
<input type="text" name="eMail" id="eMail" autoplete="email" placeholder="Enter you E-Mail!" pattern="" required>
</small></label>
<input class="btn btn-primary btn-sm" type="submit" name="submit" id="submit" value="Subscribe">
</div>
</form>
</div>
</div>
</div>
</footer>You must have two parts: 1: main, 2: footer The footer should not be inside main