I've successfully made the image stick to the footer, but I'm struggling to get the footer to stick to the bottom when in responsive mode. I'm new to bootstrap, so any help would be greatly appreciated.
HTML: The footer is located after the table.
<div class="instructables-container" id="instructables" style="position: relative; margin-left: 0px;height: 10px; ">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading" style="color: #2E2E2E; text-align: center;">INSTRUCTABLES</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p style="font-size: 60px;">x</p>
<p>Instructables</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p style="font-size: 60px;">x</p>
<p>xx</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p style="font-size: 60px;">x</p>
<p>xx</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p style="font-size: 60px;">x</p>
<p>xx</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="height:30%; background-color: white;">
<div class="robot" style="position: absolute; margin:auto; left:0; right:0; bottom: 20px;">
<a href="http://instructables.com/member/neroliko"><img src="http://i.imgur.com/q7GBNF1.png" /></a>
</div>
<div class="words" style="position: absolute; width:100%;background-color:#E6E6E6; bottom:0px;">
<p style=" font-size: 13px; font-family: 'Open Sans', 'Helvetica Neue', Georgia, serif;">Contact: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d73786f7271747676755d7a707c7471337e7270">[email protected]</a> </p>
</div>
</div>
CSS:
.instructables-container {
margin-top: 25px;
margin-bottom: 300px;
margin-left: 0px;
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
font-family: Helvetica;
}
.table{
margin-top: 80px;
text-align: center;
margin-left: 11%;
border: 0px;
}
.footer {
position: absolute;
font-family: Helvetica;
letter-spacing: 3px;
width: 100%;
height: 40px;
line-height: 20px;
font-size: 4px;
text-align: center;
height:400px;
}