Question

Why doesn’t my bootstrap code scale down to mobile?

<div class="navbar navbar-fixed-bottom">
   <div class="navbar-inner">
        <div class="container">
            <form action="" class="navbar-search pull-right">
                <a href="#" class="btn btn-success">
                    <i class="icon-shopping-cart icon-white"></i> Checkout
                </a>
            </form>
        </div>
    </div>
</div>​

On my computer I have to physically scroll to the right.

See the code running here: http://jsfiddle.net/nVw2V/

How can I get this to right-align down to mobile?

Thanks for all info

FYI: I tested by resizing the browser window and running [via PhoneGap] in an Android emulator

Answer 1

You need to include the bootstrap-responsive.css stylesheet in tandem with the bootstrap stylesheet in order to cover mobile devices.

Just include the following “after” the bootstrap.css stylesheet declaration:

http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Demo: http://jsfiddle.net/nVw2V/1/