Search code examples
twitter-bootstrapresponsive-designfooter

Bootstrap 3 Footer is not responsive

I am trying to design footer using bootstrap 3,

When i minimize the screen, my design is not responsive

I want the footer menu to be the same as in large screen.

<footer id="footer" class="midnight-blue">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                © 2013 <a target="_blank" href="" title="Free Twitter Bootstrap WordPress Themes and HTML templates">Layout</a>. All Rights Reserved.
            </div>
            <div class="col-sm-6">
                <ul class="pull-right">
                    <li><a style="color:#FFF" href="#">Home</a></li>
                    <li><a style="color:#FFF" href="#">About Us</a></li>
                    <li><a style="color:#FFF" href="#">Faq</a></li>
                    <li><a style="color:#FFF" href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>

Here the link https://jsfiddle.net/chaitu11/w3fbxsL2/2/

i need footer in this way ,while minimizing I want it in this way

Solution

  • You can use bootstrap class list-unstyled , list-inline on your unordered list.

    <ul class="list-unstyled list-inline pull-right">

    or Removing your media query (@media (min-width: 768px)) on line 14 also works