No matter what I do, I still can't get my static navbar to stick itself to the bottom of the page. The following code has gotten it to do so in mobile view. However, that's it. When you view the page normally, the footer is near the middle of the page.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "container">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li><a href = "#" >1</a></li>
<li><a href = "#" >2</a></li>
<li><a href = "#" >3</a></li>
</ul>
</div>
</div>
</div>
<div class = "container">
<div class = "jumbotron text-center">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
<a class ="btn btn-default">Lorem ipsum</a>
<a class = "btn btn-info">Lorem ipsum</a>
</div>
</div>
<div class = "container">
<div class = "row">
<div class = "col-md-3">
<h3><a href = "#">Lorem ipsum</a></h3>
<p>Lorem ipsum</p>
<a href = "#" class = "btn btn-default">Lorem ipsum</a>
</div>
<div class = "col-md-3">
<h3><a href = "#">Lorem ipsum</a></h3>
<p>Lorem ipsum</p>
<a href = "#" class = "btn btn-default">Lorem ipsum</a>
</div>
<div class = "col-md-3">
<h3><a href = "#">Lorem ipsum</a></h3>
<p>Lorem ipsum</p>
<a href = "#" class = "btn btn-default">Lorem ipsum</a>
</div>
<div class = "col-md-3">
<h3><a href = "#">Lorem ipsum</a></h3>
<p>Lorem ipsum</p>
<a href = "#" class = "btn btn-default">Lorem ipsum</a>
</div>
</div>
</div>
<div class = "navbar navbar-default navbar-static-bottom">
<div class = "container">
<p class = "navbar-text pull-daft">FOOTIE</p>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>
</body>
CSS:
.body {
margin-bottom:80px;
}
body {
padding-top: 76px;
}
@media screen and (max-width: 768px) {
body {
padding-top: 71px;
}
}
.navbar-default {
background-color: #bdffae;
border-color: #bdffae;
height: 28px;
}
.navbar-static-bottom {
border-radius: 0;
z-index: 1000;
border-width: 0 0 1px;
padding-right: 0;
padding-left: 0;
margin: 20px 0 0; /* NOTE */
}
Increasing the margin from 20px does cause the the footer to move down, however, after 95px or so, it "maxes out" in that exceeding 95px, results in a scroll bar to appear. Not to mention, at 95px there still is a slight gap between the footer and the bottom of the page, which is irritating. What's also worth noting when increasing the margin, is that if content is added or taken away from the page, everything gets screwed up, so if anything, I need a long-term solution which will permanently glue the footer to the bottom of the page without having it fixed in the browser.
Someone please help. Thanks in advance.
Wrap your page in a custom wrapper (Yikes!! To Bootstrap?!? Yes, don't worry, it works and everything stays responsive), set the body and html to 100% height (WHAT!!? Trust me), add a custom class to your footer, and then bounce some inside content around just a little.
Here's an example with some of your html: http://www.bootply.com/iphqanCGV9
And here is the gist of it:
CSS:
html,
body {
height:100%;
}
.custom-wrapper {
min-height:100%;
position:relative;
}
.pad-container{
padding-top:80px; /* HEIGHT OF THE HEADER + BREATHING ROOM */
padding-bottom:80px; /* HEIGHT OF THE FOOTER + BREATHING ROOM */
}
.static-footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:60px;
background:#ccc;
}
HTML:
<div class="custom-wrapper"> <!-- CUSTOM WRAPPER -->
<div class = "navbar navbar-inverse navbar-fixed-top">
...
<div class="container pad-container"><!-- ROOM TO BREATHE -->
<div class = "jumbotron text-center">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
...
<div class="footer static-footer"> <!-- HI THERE -->
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</div><!-- END CUSTOM WRAPPER -->
Adapted from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page