I'm struggling with positioning my footer at the bottom of the page. No matter what I try, it just doesn't look right.
Here's the code snippet I've been working with:
<div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Programmer</h4>
<p class="footertext">All the incredible programming on this site is thanks to this individual.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Artist</h4>
<p class="footertext">Every image you see here was hand-drawn by this talented artist.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Designer</h4>
<p class="footertext">The beautiful design and content of this site are all credited to this creative designer.<br>
</center>
</div>
</div>
<div class="row">
</div>
</div>
I attempted to use
<div class="footer navbar-fixed-bottom">
but that caused the text above the footer to overlap with it.
Below is the CSS I implemented:
#footer {
padding-top: 100px
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background:
/* color overlay */
linear-gradient(
rgba(240, 212, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
/* image to overlay */
url(222.png);
}
.footertext {
color: #ffffff;
}