Fix footer in Bootstrap - html

Question

I've managed to make the image stick to the footer but failed to make the footer stick to the bottom when entering responsive mode. I'm a newbie to bootstrap so help is appreciated.
HTML: The footer is 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;">
<img src="http://i.imgur.com/q7GBNF1.png" />
</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: nerolikkh#gmail.com </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;
}

Answer 1

.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;
}
.test div{
z-index:1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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 test">
<div class="col-lg-3 col-md-6 col-xs-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 col-xs-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 col-xs-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 col-xs-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;">
<img src="http://i.imgur.com/q7GBNF1.png" />
</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: nerolikkh#gmail.com </p>
</div>
</div>
You should add the correct classes for mobile screen so you should define the width that you want for each div in mobile screen. You can use bootstrap class for that .col-xs-6 so one of these divs will be half of screen. Here is your html code and also a jsfiddle
And it's not good to use inline style you should use it as internal or external!