Nevershow2016 Nevershow2016 - 7 months ago 9
HTML Question

How to make a footer resposive bootstrap

Hi guys got a simple question about bootstrap, trying to make a footer resposive but for some reason i cant seem to do it, any help on making this footer resposive for mobiles etc would be great.

So far i have:

Not sure what i should be doing, new to this :0

Thanks for the help

Answer

Not really sure what kind of look your going for but if you are looking for but assuming that you are going for something that has a left and right section and then at mobile sizes stacks to make it more viewable you can do something like the following:

Here is a fiddle to show you the result Fiddle Demo

<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-8 footer-left">
        <img class="footer-logo" src="http://placehold.it/250x250" />
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
      </div>
      <div class="col-sm-4 footer-right">
        <a class="fa fa-facebook" href="#"></a>
        <a class="fa fa-twitter" href="#"></a>
        <a class="fa fa-instagram" href="#"></a>
      </div>
    </div>
  </div>
</footer>

And responsive Css

@media screen and (min-width:768px){
  .footer-right{text-align:right;}
}
@media screen and (max-width:767px){
  .footer-left, .footer-right{text-align:center;}
  .footer-logo{display:block;margin:5px auto;}
}