Bootstrap CSS footer customisation issue - html

Question

I'm having trouble getting the correct styling for my footer. I've managed to get the correct styling for mobile but for tablet and desktop I'm having a few issues. I'm trying to get the social icons to be centred horizontally off to the right-hand side of the footer. I'm not sure why the have the current set location. Any help in figuring this out would be helpful.
This image shows what I'm trying to achieve for the desktop version. I'm not sure how to do it with out using a fixed margin position which isn't what I want to do as it only then works in chrome and then looks bad in other browsers?
enter link description here
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="copyright text-muted">Copyright © Eat Sleep Kayak 2015</p>
</div>
<div class="footersocialicons col-xs-12 col-sm-6">
<ul class="list-inline">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
/* Footer */
#media (max-width:768px){
footer {text-align: center; padding: 5px;}
}
#media (min-width: 769px) {
footer .list-inline {
float: right;
position:relative;top:50% ;
transform:translateY(-50%);
}
footer .copyright {
float: left;
}
}
footer {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/*background-color: #eee;*/
background-color: #6B6A67;
padding-top: 5px;
}
footer .copyright {
font-size: 14px;
}
footer .list-inline {
height: 100%;
}

Answer 1

Add the class .text-center to this line - <div class="footersocialicons col-xs-12 col-sm-6"> to center everything inside.

Answer 2

Try adding a fixed height and line-height to your footer. You also said you wanted the icons to the right, so you add the .text-right class to do that.
The following centers the footer text and icons horizontally and aligns the icons to the right.
<style>
footer {
height: 60px;
line-height: 60px;
}
</style>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="copyright text-muted">Copyright © Eat Sleep Kayak 2015</p>
</div>
<div class="footersocialicons col-xs-12 col-sm-6 text-right">
<ul class="list-inline">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Fiddle: http://jsfiddle.net/timgavin/mas4dg0y/