Bootstrap layout on smaller screens

Question

I'm using PhoneGap to build webpages into applications which are created using Twitter Bootstrap and Flat UI . Everything seems to be working fine but I am having one issue. When I test the webpage on my desktop or laptop the layout is fine, divided in the 12 sections, but when I attempt to have either images or buttons on the same row on the phone layout, they are placed vertically on top of the other.

For example, if I have two buttons on one row, both buttons will be stretched to the width of the phone and placed on two separate rows.

    <div class="row">
        <div class="col-md-6">
            <a href=".\back.html" class="btn btn-block btn-lg btn-success">BACK</a>
        </div>
        <div class="col-md-6">
            <a href=".\next.html" class="btn btn-block btn-lg btn-inverse">NEXT</a>
        </div>
    </div>

Also, at the top I have declared:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Any idea's as to why this is happening?

One thing I wanted to do was have 6 boxes numbered 1-6 that the user could select from. I wanted to have 2 numbers per row and to have 3 rows. When I tried to implement the images (numbered boxes) in this way, they were stretched again and there ended up being 6 rows and massive boxes.

Answer 1

You are using .col-md-6 , which is for medium size screens. If you wish to have them placed the same way on phones (x-small devices), you need to use .col-xs-6 instead.

For further information, you can read the bootstrap documentation on how to set that up.

Answer 2

In old bootstrap 2.3.2 grid syntax look like this

<div class="container">
    <div class="row-fluid">
        <div class="span6">left</div>
        <div class="span6">right</div>
    </div>
</div>

class="row-fluid" used when we want to get a responsive design, but in this case all (.col-md-6 - in new bootstrap or .span6 in old bootstrap) element display as block element with width=100% Look at old 2.3.2 bootstrap grid in developers tools an re-size window width. And look at this new 3 bootstrap grid in developers tools an re-size window width. Сompare and understand everything.